У меня есть простой div на странице:
<div>Some Text</div>
Можно ли с помощью CSS сделать его стрелкой. Что-то типа:
ОБНОВЛЕНИЕ
Это результат, который я вижу с предлагаемым решением web-tiki:
Видите порезы на стрелке?
Спасибо, Мигель
Сделать правую часть div стрелкой
comment
Этот сайт может помочь.
- person Batu.Khan schedule 16.04.2014
comment
Я знаю этот сайт, но не могу контролировать высоту div... Это зависит от текста внутри. Он может иметь одну или две текстовые строки. А на сайте мне нужно указать высоту в пикселях.
- person Miguel Moura schedule 16.04.2014
comment
Если у вас есть несколько рядов и стрелка с углами 45 градусов, то в конечном итоге она станет очень большой (ширина стрелки должна равняться половине высоты).
- person Matt Sach schedule 16.04.2014
Ответы (7)
EDIT: Если вам нужно, чтобы стрелка адаптировалась к высоте текста (учитывая, что она может отображаться на нескольких строках), вы можете использовать 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;
}
person
web-tiki
schedule
16.04.2014
Если вы добавите две строки в div, это не сработает... И стрелка кажется немного странной, по крайней мере, в FIREFOX. На нем видны какие-то порезы...
- person Miguel Moura; 16.04.2014
Этот div имеет статическую высоту, сэр.
- person Batu.Khan; 16.04.2014
@MDMoura, если вам нужно управлять div с более чем одной строкой, вы должны указать это в вопросе, поскольку это соответствующее ограничение. у вас также минимальная/максимальная ширина?
- person Fabrizio Calderan; 16.04.2014
@MDMoura, что ты имеешь в виду под порезами? В моем Firefox это выглядит идеально.
- person web-tiki; 16.04.2014
Теперь у меня нет определенной минимальной или максимальной ширины.
- person Miguel Moura; 16.04.2014
@web-tiki Я только что обновил свой вопрос, указав изображение результата, который я получаю с помощью вашего кода ... Вы можете видеть разрезы на стрелке.
- person Miguel Moura; 16.04.2014
@web-tiki Это хорошо, но я все еще вижу порезы на стрелке. Почему это?
- person Miguel Moura; 16.04.2014
@MDMoura Звучит как проблема со сглаживанием, но я не могу с этим поделать, потому что не вижу этого ни в firefox, ни в chrome (я использую firefox 28.0).
- person web-tiki; 16.04.2014
@MDMoura позвольте нам продолжить это обсуждение в чате
- person web-tiki; 16.04.2014
Проверьте это
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;
}
person
Santy
schedule
16.04.2014
Ваш код ломается, когда div содержит две или более текстовых строки
- person Rebecca; 26.01.2015
Возможно, вам это не нужно, но существует решение, описанное в навигационная цепочка на чистом CSS3, что позволяет получить коробки стреловидной формы, вставленные по одной внутрь каждой.
Он идеально подходит для навигации по Breadcrumbs и использует другой подход вместо простого borders для получения желаемого результата. Более подробно, некоторые используемые свойства CSS:
- Созданное содержимое (поддержка с IE8 )
- Тень блока (поддерживается начиная с IE9)
- Преобразование 2D (поддерживается начиная с IE9)
Благодаря поддержке браузерами этих конкретных свойств, это решение будет работать правильно, начиная с IE9 (но не в IE8).
person
Luca Detomi
schedule
16.04.2014
Я знаю, что приведенные выше ответы точны, но попробуйте и это.
Вы можете использовать clip-path CSS
clip-path: polygon(0 0, 100% 0, 100% 68%, 46% 100%, 0 68%);
Или вы также можете сгенерировать его отсюда: https://bennettfeely.com/clippy/
person
Nikhil Bhardwaj
schedule
11.06.2020
Действительно хороший метод!
- person huypham99; 13.07.2021
Вот очень простой способ сделать это, но он использует преобразование, поэтому ваш целевой браузер должен поддерживать это свойство (большинство современных браузеров поддерживают).
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>
person
Ben Petersen
schedule
22.05.2017
привет отличная работа вы сделали там! хотя я застрял в одном.. я хочу изменить цвет фона первого варианта «Домой»... не могли бы вы сказать мне, как это сделать?
- person Jaimin; 02.09.2017
Либо используйте селектор первого дочернего элемента в .crumb, либо добавьте класс в этот раздел ‹li class=crumb pull-left› Главная страница ‹/li›
- person Ben Petersen; 20.09.2017
Да, это возможно: в вашем html сделайте что-то вроде этого:
у вас есть 2 div, один с классом "стрелка-вправо" и один с классом "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;
}
наслаждаться.. :)
person
Gil Fitussi
schedule
16.04.2014
Попробуйте этот код
.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;
}
person
omkar khade
schedule
16.04.2014
Очевидно, вы только что вставили контент по рекомендации Batu Zet без единого прикосновения, кроме размеров. Также отсутствует ссылка на источник. Пожалуйста, не делайте этого, это очень неуважительно.
- person Cem Özer; 16.04.2014
