Make the right side of a div as an arrow

后端未结

关注

 7  605

I have a simple div on a page:

Some Text

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

相关标签:

7条回答

生来不讨喜

2020-12-03 01:44

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

0 讨论(0)

小蘑菇

2020-12-03 01:46

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

0 讨论(0)

无人及你

2020-12-03 01:46

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

0 讨论(0)

终归单人心

2020-12-03 01:47
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).
0 讨论(0)
发布评论:

提交评论
- 加载中...

走了就别回头了

2020-12-03 01:49

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>

0 讨论(0)

礼貌的吻别

2020-12-03 01:49

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

0 讨论(0)

1 2 下一页