斜分色块 | 雪与峰

斜分色块

w-xuefeng 7月 14, 2018

需求描述

将两个色块使用斜线分隔开

HTML 结构

  <div class="box"></div>

CSS 实现

  .box &#123;
    width: 150px;
    height: 50px;
    position: relative;
    background: pink; /*左边色块的颜色*/
  &#125;
  .box::after &#123;
    position: absolute;
    right: 0;     
    bottom: 0;
    width: 50px; /*右边色块顶部距离右边的距离*/
    border-left: 50px solid transparent; /*右边色块底部距离右边的距离 - 右边色块顶部距离右边的距离*/
    border-bottom: 50px solid deepskyblue; /*右边色块的高度及颜色*/
    content: "";      
  &#125;

效果预览：

cssview

Javascript 封装实现

封装

  let Segment = function(opt)&#123;
    this.el = document.querySelector(opt.el);
    this.init(opt);
  &#125;

  Segment.prototype = &#123;
    init (opt) &#123;
      this.el.style.position = "relative";    
      this.el.style.width = `$&#123;opt.width&#125;px`;
      this.el.style.height = `$&#123;opt.height&#125;px`;
      this.el.style.background = opt.leftColor;
      this.drawRight(opt);
    &#125;,
    drawRight (opt) &#123;
      document.styleSheets[0].removeRule(`$&#123;opt.el&#125;::after`);
      let deg = opt.deg > 90 ? 180 - opt.deg : opt.deg;
      let k = Math.tan(deg * Math.PI/180);  
      let minK = opt.height / opt.width;
      k = k < minK ? minK : k;    
      opt.rightTopWidth = deg != 90 ? opt.width / 2 - opt.height / ( 2 * k) : opt.width / 2;
      let cssRule = [
        `position: absolute`,
        `right: 0`,
        `bottom: 0`,
        `width: $&#123;opt.rightTopWidth&#125;px`,
        `border-left: $&#123;opt.width - 2 * opt.rightTopWidth&#125;px solid transparent`,
        `border-bottom: $&#123;opt.height&#125;px solid $&#123;opt.rightColor&#125;`,
        `content: ""`,
      ];
      opt.deg > 90 ? cssRule.push(`transform: rotateX(180deg);`) : true;
      document.styleSheets[0].insertRule(`$&#123;opt.el&#125;::after&#123;$&#123;cssRule.join(';')&#125;&#125;`, 0);
    &#125;
  &#125;

使用

  new Segment(&#123;
    el: '.box', // 实例的class或id
    width: 200, // 实例的宽度
    height: 50, // 实例的高都
    leftColor: 'pink', // 左边颜色
    rightColor: 'deepskyblue', // 右边颜色
    deg: 135 // 分割斜线第一象限角的角度
  &#125;);