[英]HTML/CSS - creating an “arrow” on one side of a DIV
I am transforming a div to give it a point on one end like an arrow. 我正在转换div以使其一端像箭头一样指向一个点。 I've accomplished this using a second div and a CSS transform to rotate its borders 45 degrees.
我使用第二个div和CSS转换将其边界旋转45度来完成此操作。 My issue is the background on the original div bleeds through and still forms a square.
我的问题是原始气泡渗出并仍然形成正方形的背景。 How can I solve this issue?
我该如何解决这个问题? I've created a fiddle at the below link, I would like the blue background of "Step 1" to end in the point instead of the flat edge.
我在下面的链接中创建了一个小提琴,我希望“步骤1”的蓝色背景结束于该点而不是平坦的边缘。 Thank you.
谢谢。 Fiddle
小提琴
<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: 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%;
}
You can make a right arrow/triangle like that by setting a transparent top and bottom border, then give a left border of the color you want the arrow to be. 您可以通过设置透明的顶部和底部边框来制作类似的右箭头/三角形,然后为左箭头指定想要的颜色。 Then style it so it works with your layout.
然后设置样式,使其适合您的布局。
.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.