如何在带有右箭头的 div 周围添加白色边框？

Question

我在一个页面上有一个简单的 div：

<div>Some Text</div>

是否可以使用 CSS 制作这样的东西：

Answer 1

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
  }

密码本：http://codepen.io/swapnaranjitanayak/pen/mOWrzX

Answer 2

当然可以使用几个伪元素。示例：

<div class="arrowBox">Some Text</div>

然后使用以下 CSS（注意，我使用了红色边框而不是白色边框，所以我可以看到它）：

.arrowBox{
    width: 100px;
    height: 50px;
    background: green; 
    border: 5px red solid;
    display: block;
    position: relative;
    line-height:  50px;
    color:  #fff;
    text-align: center;
}

.arrowBox:before{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: -34px;
    top: -5px;
    border-top: 30px solid transparent;
    border-bottom:30px solid transparent;
    border-left: 30px solid red; 
    z-index: -1;
}

.arrowBox:after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: -25px;
    top: 0;
    border-top: 25px solid transparent;
    border-bottom:25px solid transparent;
    border-left: 25px solid green; 
}

Answer 3

您可以使用此代码制作类似的箭头

<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 可以生成与上述类似的片段。希望这对您有所帮助！

Answer 4

供您入门的东西：

*{
  box-sizing:border-box;
}
.wrapper{
  border: 1px solid #ddd;
  display:inline-block;
  position:relative;
}
div.arrow {
  height: 50px;
  line-height: 50px;
  width: 75px;
  background: green;
  position: relative;
  text-align:center;
  border: 1px solid #ddd;
  margin: 10px;
  color:white;
  font-weight:bolder;
}
div.arrow:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%, 0);
  height: 0;
  width: 0;
  border-left: 25px solid green;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  z-index:2;
}
div.arrow:after {
  content: '';
  display: block;
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translate(100%, -50%);
  height: 0;
  width: 0;
  border-left: 35px solid white;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
  z-index:1;
}
.wrapper:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(100%, -50%);
  height: 0;
  width: 0;
  border-left: 36px solid #ddd;
  border-top: 36px solid transparent;
  border-bottom: 36px solid transparent;
}

<div class="wrapper">
  <div class="arrow">Text</div>
</div>

Answer 5

这是在您自己的项目中创建此效果所需的 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>

如何在带有右箭头的 div 周围添加白色边框？

How to add a white border around a div with a right arrow?

html

css

border

pseudo-element

css-shapes