Make the right side of a div as an arrow

问题

I have a simple div on a page:

<div>Some Text</div>

Is it possible, with CSS, to make it finish as an arrow. Something like:

UPDATE

This is the result I see with web-tiki proposed solution:

See the cuts on the arrow?

Thank You, Miguel

回答1:

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-gradient background for the arrow.

FIDDLE

This can make it :

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

回答2:

Check This

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

回答3:

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.

It is perfect for Breadcrumbs navigation and use another approach instead of simple borders to obtain desired result. More in detail, some CSS properties used are the following:

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).

回答4:

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>

回答5:

Yes its possible: in your html do somthing like this:

you have 2 divs one with class "arrow-right" and one with class "middle-div"

<div class="arrow-right"></div>
<div class="middle-div"></div>

in your css file do somthing like this:

.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.. :)

回答6:

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

来源：https://stackoverflow.com/questions/23108550/make-the-right-side-of-a-div-as-an-arrow

标签

html

css

css-shapes