版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ink_if/article/details/78534815
今天又有小姐姐在群里问css是如何画出三角形的,让我想起一开始在学校学HTML+CSS的时候,觉得学这些标签样式很无趣,认为不过是一些文字+图片,直到偶然在慕课网上面看了一个视频=>重拾CSS的乐趣,才对CSS3的美妙之处有了一些体会。
CSS画三角形我之前也有研究过,但是记忆总是不深刻,再次用到时,仍然需要找资料,今天加深一下印象,希望以后再用到的时候,可以从脑子里面一下子拿出来,666。
/* 等腰三角形(箭头朝上); */
#div1{
width: 0;
height: 0;
border-bottom: 100px solid cyan;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
/* 等腰三角形(箭头朝下); */
#div2{
width: 0;
height: 0;
border-top: 100px solid cyan;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
/* 等腰三角形(箭头朝左); */
#div3{
width: 0;
height: 0;
border-right: 100px solid cyan;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
/* 等腰三角形(箭头朝右); */
#div4{
width: 0;
height: 0;
border-left: 100px solid cyan;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
/* 直角三角形(箭头左上); */
#div5{
width: 0;
height: 0;
border: 50px solid gray;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
}
/* 直角三角形(箭头右下); */
#div6{
width: 0;
height: 0;
border: 50px solid lightblue;
border-left: 50px solid transparent;
border-top: 50px solid transparent;
}
寄几敲出来了,以后应该不会忘了,开森。