下面讲一下如何用CSS代码写出三角形,话不多说直接上代码:
<style>
div {
width: 0;
height: 0;
border-top: 100px solid pink;
border-right: 100px solid #ff8066;
border-bottom: 100px solid #fed71a;
border-left: 100px solid #00c9a7;
}
</style>
效果图如下:
若只想其中一个三角形,则需要改写代码如下:
div {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #fed71a;
border-left: 100px solid transparent;
}
效果图如下:
代码简写如下:
div {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent #FED71A transparent;
}
效果图如下: