【转】用CSS画各种形状(一)

本篇是以下两篇文章的转载和总结

纯CSS画基本形状
用CSS画三角形，普通版，文艺小阴影版~

1、画方形

width:100px;
height:100px;
background:red;

正方形

2、画正圆

width:100px;
height:100px;
background:red;
border-radius:50%;

正圆

3、画椭圆

width:200px;
height:100px;
background:red;
border-radius:100px / 50px;

椭圆

4、画个border理解图，再画三角形

width:100px;
height:100px;
background:#ddd;
border-top:30px solid red;
border-left:30px solid blue;
border-right:30px solid green;
border-bottom:30px solid black;

盒模型理解

接下来把盒模型的宽高都变成0

width:0;
height:0;
background:#ddd;
border-top:30px solid red;
border-left:30px solid blue;
border-right:30px solid green;
border-bottom:30px solid black;

宽高为0

然后把相应border的颜色改成transparent就可以看到三角形了

width:0;
height:0;
background:transparent;
border-top:30px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid transparent;

三角形

width:0;
height:0;
background:transparent;
border-top:30px solid transparent;
border-left:30px solid blue;
border-right:30px solid transparent;
border-bottom:30px solid transparent;

三角形

当然，也可以这样，只需要更改相应的颜色就可以了。

width:0;
height:0;
background:transparent;
border-top:30px solid blue;
border-left:30px solid blue;
border-right:30px solid transparent;
border-bottom:30px solid transparent;

屏幕快照 2017-05-06 下午1.36.34.png

还可以改变高度成为这样：

width:0;
height:0;
background:transparent;
border-top:50px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid transparent;

这样也可以的

那我们如何给这个三角形加个外阴影呢？用box-shadow试试看~

width:0;
height:0;
background:transparent;
border-top:50px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid transparent;
box-shadow：0 0 5px rgba(0,0,0,0.9)

带阴影

阴影是出来了，但是并没有围绕着三角形，而是围绕着整个border显现出来。接下来按照抄来的一个思路来解决这个问题，大致的思路就是，用after来进行叠加以画出阴影效果。

   详细的思路在这篇文章里

div.child{
      width:70px;
      height:50px;
      /* border:1px solid green; */
      position:relative;
      box-shadow:0 5px 3px -4px rgba(0,0,0,0.3);
      overflow:hidden;
    }
    div.child:after{
      content:'';
      position:absolute;
      width:50px;
      height:50px;
      border:1px solid red;
      background:red;
      box-shadow: 0 0 3px rgba(0,0,0,0.3);
      left:9px;
      top:30px;
      transform:rotate(45deg);
    }

这是效果

带阴影的三角形

先总结到这里，有时间再画平形四边形和其它形状。