Html 将 div 的右侧作为箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23108550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make the right side of a div as an arrow
提问by Miguel Moura
I have a simple div on a page:
我在页面上有一个简单的 div：
<div>Some Text</div>
Is it possible, with CSS, to make it finish as an arrow. Something like:
是否有可能使用 CSS 使其以箭头的形式结束。就像是：
UPDATE
更新
This is the result I see with web-tiki proposed solution:
这是我在 web-tiki 提出的解决方案中看到的结果：
See the cuts on the arrow?
看到箭头上的切口了吗？
Thank You, Miguel
谢谢你，米格尔
回答by web-tiki
EDIT :If you need the arrow to adapt to the height of the text (considering it can display on several lines) You can use linear-gradientbackground for the arrow.
编辑：如果您需要箭头适应文本的高度（考虑到它可以显示在多行上），您可以为箭头使用线性渐变背景。
This can make it :
这可以做到：
CSS :
CSS :
div{
height:40px;
background:red;
color:#fff;
position:relative;
width:200px;
text-align:center;
line-height:40px;
}
div:after{
content:"";
position:absolute;
height:0;
width:0;
left:100%;
top:0;
border:20px solid transparent;
border-left: 20px solid red;
}
回答by Santy
Check This
检查这个
HTML
HTML
<div class="text">Some Text<span class="arrow"></span>
</div>
CSS
CSS
.text {
background-color:#ff0000;
color:#fff;
display:inline-block;
padding-left:4px;
}
.arrow {
border-style: dashed;
border-color: transparent;
border-width: 0.20em;
display: -moz-inline-box;
display: inline-block; /* Use font-size to control the size of the arrow. */
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
width: 0;
background-color:#fff; /* change background color acc to bg color */
border-left-width: 0.2em;
border-left-style: solid;
border-left-color: #ff0000;
left:0.25em;
}
回答by Luca Detomi
Maybe is over your needs, but exists a solution, described in Pure CSS3 breadcrumb navigation, that allows to obtain boxes with arrow shape, stuck one inside each.
也许超出了您的需求，但存在一种解决方案，在Pure CSS3 面包屑导航 中描述，该解决方案允许获取带有箭头形状的框，每个框内都有一个。
It is perfect for Breadcrumbs navigation and use another approach instead of simple bordersto obtain desired result. More in detail, some CSS properties used are the following:
它非常适合面包屑导航，并使用另一种方法而不是简单的方法borders来获得所需的结果。更详细地说，使用的一些 CSS 属性如下：
- Generated content(support since IE8)
- Box shadow(support since IE9)
- 2D Transformation(support since IE9)
Due to browsers support of these specific properties, this solution will work correctly since IE9 (not in IE8).
由于浏览器支持这些特定属性，此解决方案自 IE9 起即可正常工作（不适用于 IE8）。
回答by Ben Petersen
Here's a very simple way to make it, but it uses transform so your target browser has to support that property (most up-to-date browsers do).
这是一个非常简单的方法，但它使用转换，因此您的目标浏览器必须支持该属性（大多数最新浏览器都支持）。
body {
padding-top: 95px;
}
.crumb-trail {
background-color: #CCD2D8;
color: #62717C;
list-style: none;
padding: 0px;
margin: auto;
width: 80%;
}
.crumb {
padding: 4px 16px;
position: relative;
}
.crumb:not(:last-child):before,
.crumb:not(:last-child):after {
content: '';
display: inline-block;
height: 1px;
width: 17px;
position: absolute;
right: -7px;
background-color: #fff;
}
.crumb:before {
top: 6px;
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.crumb:after {
bottom: 6px;
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BreadCrumbs</title>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="breadcrumbs.css">
</head>
<body>
<ul class="crumb-trail clearfix">
<li class="crumb pull-left">
Home
</li>
<li class="crumb pull-left">
Forums
</li>
<li class="crumb pull-left">
Search page
</li>
<li class="crumb pull-left">
Preview: Search criteria
</li>
</ul>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>回答by Gil Fitussi
Yes its possible: in your html do somthing like this:
是的，它可能：在你的 html 中做这样的事情：
you have 2 divs one with class "arrow-right" and one with class "middle-div"
你有 2 个 div，一个是“arrow-right”类，一个是“middle-div”类
<div class="arrow-right"></div>
<div class="middle-div"></div>
in your css file do somthing like this:
在你的 css 文件中做这样的事情：
.middle-div {
height: 120px;
float: right;
width: 230px;
background-color: green;
text-align: center;
vertical-align: middle;
line-height: 110px;
}
.arrow-right {
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
float: right;
}
enjoy.. :)
请享用.. ：）
回答by omkar khade
Try this code
试试这个代码
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.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(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 89px;
margin-top: -89px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #c2e1f5;
border-width: 95px;
margin-top: -95px;
}
