我在页面上有一个简单的 div：
<div>Some Text</div>
是否有可能使用 CSS 使其完成为箭头。比如：
更新
这是我在 web-tiki 提出的解决方案中看到的结果：
看到箭头上的切口了吗？
谢谢你， 米格尔
【问题讨论】：
标签： html css css-shapes
编辑： 如果您需要箭头适应文本的高度（考虑到它可以显示多行）您可以使用linear-gradient作为箭头背景。
这样就可以了：
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;
}
【讨论】：
检查一下
HTML
<div class="text">Some Text<span class="arrow"></span>
</div>
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;
}
【讨论】：
也许超出了您的需求，但存在一种解决方案，在 Pure CSS3 breadcrumb navigation 中进行了描述，该解决方案允许获得带有箭头形状的盒子，每个盒子里面都粘一个。
它非常适合面包屑导航并使用另一种方法而不是简单的borders 来获得所需的结果。更详细地说，使用的一些 CSS 属性如下：
由于浏览器对这些特定属性的支持，此解决方案从 IE9 开始（不在 IE8 中）可以正常工作。
【讨论】：
我知道上面的答案是准确的，但也试试这个
您可以使用剪辑路径 CSS
clip-path: polygon(0 0, 100% 0, 100% 68%, 46% 100%, 0 68%);
或者你也可以从这里生成它：https://bennettfeely.com/clippy/
【讨论】：
这是一种非常简单的方法，但它使用转换，因此您的目标浏览器必须支持该属性（大多数最新浏览器都支持）。
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>【讨论】：
是的，有可能： 在你的 html 中做这样的事情：
你有 2 个 div，一个是“arrow-right”类，一个是“middle-div”类
<div class="arrow-right"></div>
<div class="middle-div"></div>
在你的 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;
}
享受.. :)
【讨论】：
试试这个代码
.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;
}
【讨论】：