it-swarm.com.ru

Отзывчивый треугольник CSS с шириной в процентах

Код ниже создаст стрелку прямо под элементом <a>

JSFiddle

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}
<a href="#" class="btn">Hello!</a>

Проблема в том, что мы должны указать ширину ссылки, чтобы получить стрелку правильного размера, потому что мы не можем указать ширину границы в пикселях.

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

29
sdvnksv

Вы можете использовать наклонный и повернутый псевдоэлемент, чтобы создать отзывчивый треугольник по ссылке:

DEMO (измените размер окна результатов, чтобы увидеть, как оно реагирует)

Треугольник поддерживает соотношение сторон с помощью свойства padding-bottom.

Если вы хотите, чтобы фигура адаптировала свой размер в соответствии с ее содержимым, вы можете удалить ширину в классе .btn

.btn {
  position: relative;
  display: inline-block;
  height: 50px; width: 50%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}
.btn:after {
  content: "";
  position: absolute;
  top:50px;  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  transform-Origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/

body {
  background: url('http://i.imgur.com/qi5FGET.jpg');
  background-size: cover;
}
<a href="#" class="btn">Hello!</a>

Для получения дополнительной информации об отзывчивых треугольниках и о том, как их сделать, вы можете взглянуть на Треугольники с поворотом преобразования (простые и причудливые реагирующие треугольники)

45
web-tiki

Другим решением этой проблемы будет использование CSS-пути клипа для вырезания треугольника из цветного блока. Однако IE не поддерживается, но может использоваться для внутренних инструментов и т.д.

DEMO

Написано с помощью SCSS для удобства.

.outer {
  background: orange;
  width: 25%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em;

  p {
    margin: 0;
    text-align: center;
    color: #fff;
  }

  &:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; 
    right: 0;
    padding-bottom: 10%;
    background: orange;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  }

}
8
Probocop

Я нашел решение, которое работает с любой шириной/высотой. Вы можете использовать два псевдоэлемента с фоном linear-gradient, например, ( fiddle ):

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:before {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 50%;
    height: 10px;
    background: linear-gradient(to right bottom, gray 50%, transparent 50%)
}

.btn:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 50%;
    height: 10px;
    background: linear-gradient(to left bottom, gray 50%, transparent 50%)
}
5
Alexandr Subbotin

Модифицированная версия приведенного ниже кода может помочь вам достичь этого 

HTML

<div class="triangle-down"></div>

CSS

.triangle-down {
    width: 10%;
    height: 0;
    padding-left:10%;
    padding-top: 10%;
    overflow: hidden;
}
.triangle-down:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    margin-top:-500px;

    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-top: 500px solid #4679BD;
}

Для дальнейшего чтения о адаптивных треугольниках: Отзывчивые треугольники CSS

4
lessismore

Я попробовал другие ответы и обнаружил, что они слишком сложны и/или громоздки, чтобы манипулировать формой треугольника. Вместо этого я решил создать простую форму треугольника в виде SVG.

Высота треугольника может быть установлена ​​на абсолютное значение или в процентах от прямоугольника, чтобы при необходимости она могла реагировать в обоих направлениях.

html, body{
  height:100%;
  width:100%;
}
.outer{
  width:20%;
  height:25%;
  background:red;
  position:relative;
  
}
.inner{
  height:100%;
  width:100%;
  background-color:red;
}
.triangle-down{
  height:25%;
  width:100%;
  position:relative;
}
.triangle-down svg{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
}
svg .triangle-path{
  fill:red;
}
<div class="outer">
<div class="inner"></div>
  <div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
 <g>
  <path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
 </g>
</svg>
</div>

Протестировано FF, Chrome, IE, Edge, моб Safari и моб Chrome

2
Will Jenkins

Я взял ответ @ Probocop и придумал следующее:

<style>
    .btn {
        background-color: orange;
        color: white;
        margin-bottom: 50px;
        padding: 15px;
        position: relative;
        text-align: center;
        text-decoration: none;
    }

    .btn:after {
        background-color: inherit;
        clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        content: '';
        height: 50px;
        left: 0;
        position: absolute;
        right: 0;
        top: 100%;
    }
</style>

<a href="#" class="btn">Hello!</a>

Это работает в Chrome, и я добавил исправление для Firefox. Это не работает в Edge, однако, если вы уменьшите высоту стрелки вниз, это будет выглядеть не так плохо.

Обратите внимание, что если вы используете загрузчик, вам нужно будет либо изменить имя, либо переопределить некоторые из применяемых стилей. Если вы решили переименовать его, вам также нужно добавить следующее в стиль .btn:

box-sizing: content-box;
0
nfplee