带三角形的Css边框
答
您可以使用div
或任何其他元素作为文本框。然后通过使用:before
类,结合透明边框(三面),可以创建一个箭头。
更多信息,可以发现here
div {
position: relative;
background: lightblue;
width: 200px;
height: 100px;
}
div:before {
position: absolute;
right: 100%;
top: 10px;
content: " ";
height: 0;
width: 0;
border: 10px solid lightblue;
border-color: transparent lightblue transparent transparent;
}
<div>Textbox with arrow</div>
答
我将介绍你看中的解决方案:
.box{
position: relative;
height: 400px;
width: 500px;
background-color: #ccc;
border: 2px solid orange;
margin: 50px 0 0 50px;
}
.box::after{
content: " ";
width: 20px;
height: 20px;
position: absolute;
top: 10px;
left: -12px;
border-top: 2px solid #FFA500;
border-left: 2px solid #FFA500;
z-index: 1000;
background: linear-gradient(-45deg, rgba(255,255,255,0) 12px, #CCC 12px);
transform: rotate(-45deg);
}
https://jsfiddle.net/kpe1k8p9/ – Jay
你应该为你的尝试提供一个例子 – fcalderan