[英]HTML/CSS - creating an “arrow” on one side of a DIV
我正在轉換div以使其一端像箭頭一樣指向一個點。 我使用第二個div和CSS轉換將其邊界旋轉45度來完成此操作。 我的問題是原始氣泡滲出並仍然形成正方形的背景。 我該如何解決這個問題? 我在下面的鏈接中創建了一個小提琴,我希望“步驟1”的藍色背景結束於該點而不是平坦的邊緣。 謝謝。 小提琴
<ul class="progress">
<li class="completed">
<span>
<span class="order">1 </span>Step 1
</span>
<div class="diagonal"></div>
</li>
<li>
<span>
<span class="order">2 </span>Step 2
</span>
<div class="diagonal"></div>
</li>
<li>
<span>
<span class="order">3 </span>Step 3
</span>
</li>
</ul>
CSS:
.progress {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 40px;
margin: 0 0 1em;
padding: 0;
}
.progress > li {
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
color: #fff !important;
list-style: none;
font-size: 16px;
z-index: 100;
background-color: #bbb;
overflow: hidden;
}
.progress > li:last-child {
border-right: 0;
}
.progress > li.completed {
background-color: #0071bc;
}
.progress > li span {
position: relative;
top: 5px;
}
.progress > li span .order {
display: inline-block;
border: 2px solid #555;
border-radius: 27px;
width: 27px;
height: 27px;
background-color: #fff;
color: #555;
margin: 0 5px 0 10px;
font-weight: bold;
text-align: center;
position: relative;
top: -1px;
line-height: 25px;
}
.diagonal {
width: 28px;
height: 28px;
position: relative;
float: right;
top: -7px;
}
.diagonal:after {
content: "";
position: absolute;
border-top: 2px solid #f5f5f5;
border-right: 2px solid #f5f5f5;
width: 38px;
height: 38px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
您可以通過設置透明的頂部和底部邊框來制作類似的右箭頭/三角形,然后為左箭頭指定想要的顏色。 然后設置樣式,使其適合您的布局。
.progress { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 40px; margin: 0 0 1em; padding: 0; } .progress > li { width: 100% !important; height: 100% !important; border-radius: 0 !important; color: #fff !important; list-style: none; font-size: 16px; background-color: #bbb; position: relative; } .progress > li:last-child { border-right: 0; } .progress > li.completed { background-color: #0071bc; } .progress > li:not(.completed) { padding-left: 20px; } .progress > li span { position: relative; top: 5px; } .progress > li span .order { display: inline-block; border: 2px solid #555; border-radius: 27px; width: 27px; height: 27px; background-color: #fff; color: #555; margin: 0 5px 0 10px; font-weight: bold; text-align: center; position: relative; top: -1px; line-height: 25px; } .diagonal { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #bbb; top: 0; right: 0; position: absolute; transform: translateX(100%); z-index: 1; } .completed .diagonal { border-left-color: #0071bc; }
<ul class="progress"> <li class="completed"> <span> <span class="order">1 </span>Step 3 </span> <div class="diagonal"></div> </li> <li> <span> <span class="order">2 </span>Step 2 </span> <div class="diagonal"></div> </li> <li> <span> <span class="order">3 </span>Step 3 </span> </li> </ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.