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

时间：2021-09-02 23:49:56

I have a simple div on a page:

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

<div>Some Text</div>

Is it possible with CSS, to make something like this:

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

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

5 个解决方案

#1

3  

You can use this code to make a similar arrow

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

<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;
}

There is even a website to produce similar snippet like the one mentioned above. Hope this helps!

甚至还有一个网站可以生成类似上面提到的类似片段。希望这可以帮助!

#2

3  

Here is the CSS and HTML markup you need to create this effect in your own project.

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

#3

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
  }

Codepen : http://codepen.io/swapnaranjitanayak/pen/mOWrzX

Codepen:http://codepen.io/swapnaranjitanayak/pen/mOWrzX

#4

1  

Sure can using a couple of pseudo elements. Example:

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

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

then use the following CSS (note, I've used a red border as opposed to white so I could see it):

然后使用下面的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; 
}

#5

1  

Something for you to get started:

有些东西可供您入门:

*{
  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>

#1

3  

You can use this code to make a similar arrow

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

<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;
}

There is even a website to produce similar snippet like the one mentioned above. Hope this helps!

甚至还有一个网站可以生成类似上面提到的类似片段。希望这可以帮助!

#2

3  

Here is the CSS and HTML markup you need to create this effect in your own project.

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

#3

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
  }

Codepen : http://codepen.io/swapnaranjitanayak/pen/mOWrzX

Codepen:http://codepen.io/swapnaranjitanayak/pen/mOWrzX

#4

1  

Sure can using a couple of pseudo elements. Example:

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

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

then use the following CSS (note, I've used a red border as opposed to white so I could see it):

然后使用下面的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; 
}

#5

1  

Something for you to get started:

有些东西可供您入门:

*{
  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>

标签：

相关文章