css绘制三角形,非常有趣

094717dd3i0800i74ir340一直觉得纯代码写形状会很难。现在看了看前端朋友的分享,感既简单,又有趣。值得学习!


html代码:

情景一:

.content{

width:10px;

height:10px;

border:10px solid #000;

border-bottom:10px solid #36e;

}

输出:

- - - - - -

情景二:

.content{

width:5px;

height:5px;

border:10px solid #000;

border-bottom:10px solid #36e;

}

输出:

- - - - - -

情景三:

.content{

width:0;

height:0;

border:10px solid transparent;/设为透明/

border-bottom:10px solid #36e;

}
输出:

- - - - - -

情景四:

.content{

width:0;

height:0;

border:10px solid transparent;

border-left:10px solid #36e;

}

输出:

- - - - - -

情景五:用伪类画三角形

content{

position: relative;//严谨

}

content:after{

border: 10px solid transparent;

border-left:10px solid #36e;

width: 0;//严谨

height: 0;//严谨

position: absolute;

content: ‘ ‘;//

}

输出:

啊啊啊
- - - - - -

情景六:
输出:


情景七:
输出:


情景八:
输出:


晕乎乎~明日继续!

麻凯倩

微信:makaiqian