Question

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

<div>Some Text</div>

使用CSS可以将其作为箭头完成。类似的东西：

Div with Arrow

更新

这是我在web-tiki提出的解决方案中看到的结果：

web-tiki proposed solution

看到箭头上的切口？

谢谢你，米格尔

Answer 1

编辑： 如果您需要箭头来适应文本的高度（考虑它可以显示在几行上）您可以使用linear-gradient背景作为箭头。

<强> FIDDLE

这可以做到：

<强> FIDDLE

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

Answer 2

检查此

<强> DEMO

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

Answer 3

可能超出了你的需求，但是存在一个解决方案，在Pure CSS3 breadcrumb navigation中描述，允许获得箭头形状的盒子，每个盒子里面都插入一个。

它非常适合面包屑导航，并使用另一种方法而不是简单的borders来获得所需的结果。更详细地说，使用的一些CSS属性如下：

生成的内容（support since IE8）
框阴影（support since IE9）
2D转化（support since IE9）

由于浏览器支持这些特定属性，此解决方案将在IE9之后正常工作（不在IE8中）。

Answer 4

我知道上述答案是正确的，但也可以尝试一下

您可以使用剪切路径CSS

clip-path: polygon(0 0, 100% 0, 100% 68%, 46% 100%, 0 68%);

或者您也可以从此处生成它：https://bennettfeely.com/clippy/

Answer 5

这是一个非常简单的方法，但它使用转换，因此您的目标浏览器必须支持该属性（大多数最新的浏览器都支持）。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 6

是的可能：在您的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;
}

享受.. :)

Answer 7

试试此代码

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

将div的右侧作为箭头

7 个答案: