Сделайте правую часть div как стрелку

У меня есть простой div на странице:

<div>Some Text</div>

Возможно ли, с CSS, сделать его законченным как стрелка. Что-то вроде:

UPDATE

Это результат, который я вижу в предлагаемом веб-тики:

См. сокращения по стрелке?

Спасибо, Miguel

Ответ 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;
}

Ответ 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;
}

Ответ 3

Возможно, это зависит от ваших потребностей, но существует решение, описанное в Чистая навигационная панель CSS3, что позволяет получите ящики со стрелой, застряв один внутри каждого.

Он идеально подходит для навигации Breadcrumbs и использует другой подход вместо простого borders для получения желаемого результата. Более подробно некоторые используемые свойства CSS следующие:

Сгенерированный контент (поддержка с IE8)
Тень коробки (поддержка с IE9)
2D-преобразование (поддержка с IE9)

Благодаря поддержке браузером этих конкретных свойств это решение будет работать корректно с IE9 (не в IE8).

Ответ 4

Да, возможно: в вашем html do somthing вот так:

у вас есть 2 divs один с классом "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;
}

наслаждайтесь..:)

Ответ 5

Здесь очень простой способ сделать это, но он использует преобразование, поэтому ваш целевой браузер должен поддерживать это свойство (большинство современных браузеров).

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>

Ответ 6

Попробуйте этот код

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