如何在带有右箭头的div周围添加白色边框？
如何在带有右箭头的div周围添加白色边框？
提问于 2016-11-21 18:30:09
我在页面上有一个简单的div：
<div>Some Text</div>有没有可能用CSS来做这样的事情：
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-11-21 18:57:50
您可以使用此代码来制作类似的箭头
<div class="arrow_box">Arrow</div>
.arrow_box {
position: relative;
background: #20d568;
border: 10px solid #ffffff;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(32, 213, 104, 0);
border-left-color: #20d568;
border-width: 70px;
margin-top: -70px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 84px;
margin-top: -84px;
}
甚至还有一个website可以生成类似上面提到的代码片段。希望这能有所帮助！
Stack Overflow用户
发布于 2016-11-21 20:56:11
这是您在自己的项目中创建此效果所需的CSS和HTML标记。
<!DOCTYPE html>
<html>
<head>
<meta>
<title>title</title>
<link>
<style type="text/css">
#base {
border: 3px solid #ccc;
background: red;
display: inline-block;
height: 30px;
position: relative;
width: 50px;
padding: 10px 0px 0px 10px;
}
#base:before {
border-bottom: 22px solid transparent;
border-left: 19px solid #ccc;
border-top: 22px solid transparent;
content: "";
height: 0;
right: -22px;
position: absolute;
top: -2px;
width: 0;
}
#base:after {
border-bottom: 20px solid transparent;
border-left: 17px solid red;
border-top: 20px solid transparent;
content: "";
height: 0;
right: -17px;
position: absolute;
top: 0px;
width: 0;
}
</style>
</head>
<body>
<div id="base" >
NEXT
</div>
</body>
</html>
Stack Overflow用户
发布于 2016-11-21 18:49:17
HTML
<div class="textBox">
Text
</div>CSS
body{
background:#000;
}
.textBox{
padding:10px;
background-color:green;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
border-left:5px solid #fff;
width:50px;
color:#fff;
position: relative;
}
.textBox::after{
content: '';
position: absolute;
width: 30px;
height: 29px;
background: green;
border-top: 5px solid #fff;
border-right: 5px solid #fff;
transform: rotate(45deg);
top: 2px;
right: -18px;
z-index: -1
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40717972
复制相关文章
相似问题