這種箭頭怎么畫？
uj5u.com熱心網友回復：
<style>#triangle-up{
display:inline-block;
width:0;
height:0;
border-left:30px solid transparent;
border-right: 30px solid transparent;
border-bottom:50px solid red;}
.lineDiv{
width:10px;
height:100px;
background:red;
margin-left:25px;
}
</style>
<body>
<div id="triangle-up">
</div>
<div class="lineDiv">
</div>
</body>
uj5u.com熱心網友回復：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.arrow{
position: relative;
background-color: #31B0D5;
width: 100px;
height: 300px;
}
.arrow::before,.arrow::after{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.arrow::before{
top: 70px;
border-width: 40px;
border-style: solid;
border-color: transparent transparent darkorange transparent;
}
.arrow::after{
bottom: 20px;
width: 30px;
height: 130px;
background-color: darkorange;
}
</style>
<body>
<div class="arrow"></div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/48749.html
標籤：HTML(CSS)
上一篇：table里包含table，jquery如何獲取第一層table的最后一行？
下一篇：求教，關于ie兼容性問題