<!doctype html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> <style> /*<!-- 制作四邊形-->*/ .box{ margin-left: 50px; width: 200px; height: 60px; border:1px solid #333333; /*relative相對行為是跟absolute絕對定位搭配使用*/ position: relative; } /*實心三角形*/ .box:before{ position: absolute; left: -20px; top: 10px; content: ""; border-right: 20px solid #333333 ; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } /*空心三角形*/ .box:after{ position: absolute; left: -19px; top: 11px; content: ""; border-right: 19px solid white ; border-top: 19px solid transparent; border-bottom: 19px solid transparent; } </style>
</head>
<body>
<!--原理：-->
<!--1.使用定位-->
<!--2.：before：after-->
<!--3.制作帶顏色的三角形-->
<!--4.制作白色的三角形
5.利用left top的值改變位置達到空心三角形的效果-->
<div class="box"></div>
</body>
</html>
uj5u.com熱心網友回復：
你這不是實作了嗎？uj5u.com熱心網友回復：
我來分享的
uj5u.com熱心網友回復：
感謝分享
uj5u.com熱心網友回復：
我這個怎么樣
uj5u.com熱心網友回復：
厲害啊，也是css完成的嗎？uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/101306.html
標籤：HTML(CSS)
上一篇：請問這個CSS如何實作？
下一篇：評測師教程的課程哪里可以找到啊？