[分享]css3怎样画矩形一边倾斜

CSS3提供了丰富的样式效果，其中矩形一边倾斜的效果很常用，下面我们来看看如何用CSS3实现这一效果。

 <div class="rectangle"></div>
  
  <style>
    .rectangle {
      width: 200px;
      height: 100px;
      background-color: #009688;
      position: relative;
    }
    
    .rectangle::before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-right: 50px solid #009688;
      position: absolute;
      right: 0;
    }
  </style> 

代码分为两部分，第一部分是HTML部分，我们需要先创建一个div，这个div的class为rectangle，作为我们画矩形倾斜的容器。第二部分是CSS部分，其中我们对rectangle这个容器进行了设置，如设置宽高，背景颜色等。接着我们使用了伪元素::before，这个伪元素可以让我们在矩形的右边添加一个三角形。

我们将伪元素的宽高设置为0，边框设置成一个直角三角形（顺序为上、下、右），宽度为50px，颜色和矩形的背景色一致，将其position设置为absolute，并且将它在右边与矩形对齐。通过这样的设置就能够得到一个带倾斜三角形的矩形了。