2

Картинка

Как сделать такие прозрачные треугольники слева и справа?

Вот такое решение я сделал: DEMO

.t-title{
  font-family: 'robotoblack';
  font-size: 25px;
  color: #000;
  height: 42px;
  width: 421px;
  display: inline-block;
  text-transform: uppercase;
  text-align: center;
  line-height: 0;
  position: relative;
}

.t-title > svg{
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
<div class="t-title">
    <p>заявка на консультацию</p>    
    <svg xmlns="http://www.w3.org/2000/svg" width="420" height="42">			
        <polygon points="0,0 420,0 405,21 420,42 0,42 15,21" style="fill:#f7b707;" />		
    </svg>	
</div>

1
  • SVG можно сделать фоном для элемента. Вот хорошая статья на эту тему frontender.info/using-svg
    – Airat
    24 мая 2015 в 18:55

3 ответа 3

4

В лоб как-то так:

.arrow-right {
	width: 0; 
	height: 0; 
        float: right;
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	border-right: 60px solid white;
}
.arrow-left {
        float: left;
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;	
	border-left: 60px solid white;
}
.main-rect{
    background-color: #b0c4de;
    height: 120px;
    text-align: center;
    line-height: 120px;
}
<div class="main-rect"><div class="arrow-left"></div>Hello, world!<div class="arrow-right"></div></div>

Прозрачность просто эмулируется заменой цвета треугольников на цвет фона и все.

2
  • Способ конечно неплохой) Но что делать если фон не слошной? а с рисунком. 23 мая 2015 в 22:09
  • @Alibek stackoverflow.com/questions/23758922/transparent-arrow-triangle вот этот вопрос посмотрите, а то лень дальше расписывать. Там кроме svg, псевдоэлементов и этого наивного подхода есть еще пару хороших методов.
    – igumnov
    23 мая 2015 в 22:56
4

Могу предложить два варианта:

  1. SVG фоном.

<svg width="420" height="42">
  <polygon points="0,0 420,0 405,21 420,42 0,42 15,21" style="fill:#f7b707;" />
</svg>

  1. Если высота будет фиксированной, можно для желтого блока через псевдоэлементы ::before и ::after добавить белые треугольники.
5
  • Пример с SVG очень крутой) Но как реализовать в него контент?) 23 мая 2015 в 21:17
  • всё) нашел способ как наложить текст сверху) А можно вопрос: Где вы сгенерировали этот svg код? 23 мая 2015 в 22:08
  • Я сделал это вручную :-) - не слишком тяжело, а вот для сложных фигур есть инструменты на подобии vectormagic.com или можно экспортировать изображение в svg в CorelDraw или Adobe Illustrator
    – Airat
    24 мая 2015 в 18:29
  • а какие значения регулируют справа и слева треугольики?) 25 мая 2015 в 12:36
  • В примере с svg нет треугольников. Я использовал элемент poligon, который может принимать множество точек x,y(указываются через пробел), и, как следствие, позволяет от рисовать любой многогранник.
    – Airat
    25 мая 2015 в 16:05
0

Вариант с clip-path:

.btn {
  display: block;
  background: orangered;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
  text-decoration: none;
  
  -webkit-clip-path: polygon(0% 100%, 10% 50%, 0% 0%, 100% 0%, 90% 50%, 100% 100%);
clip-path: polygon(0% 100%, 10% 50%, 0% 0%, 100% 0%, 90% 50%, 100% 100%);
}

.btn:hover {
  background: red;
}
<a href="#" class="btn">button</a>

Для блока шириной в 100px:

.btn {
  display: block;
  background: orangered;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
  text-decoration: none;
  
  max-width: 100px;
  width: 100%;
  
-webkit-clip-path: polygon(0% 100%, 10px 50%, 0% 0%, 100px 0%, 90px 50%, 100px 100%);
clip-path: polygon(0% 100%, 10px 50%, 0% 0%, 100% 0%, 90px 50%, 100% 100%);
}

.btn:hover {
  background: red;
}
<a href="#" class="btn">button</a>

Фиксированный размеры 200px*50px:

.btn {
  display: block;
  background: orangered;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
  text-decoration: none;
  width: 200px;
  
-webkit-clip-path: polygon(0px 50px, 10px 25px, 0px 0px, 200px 0px, 190px 25px, 200px 50px);
        clip-path: polygon(0px 50px, 10px 25px, 0px 0px, 200px 0px, 190px 25px, 200px 50px);
}

.btn:hover {
  background: red;
}
<a href="#" class="btn">button</a>

canIuse

1
  • Процентные значения полигона к тянущимся блокам, по-моему, не очень смотрятся :-) 5 апр 2017 в 7:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.