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

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

ДЕМО

Написано с помощью 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%);
  }

}

Я нашел решение, которое работает с любой шириной/высотой. Вы можете использовать два псевдоэлемента с фоном 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%)
}

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

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. сделал адаптивным (ссылка в архиве)

Я попробовал другие ответы и обнаружил, что они слишком сложны и / или громоздки, чтобы манипулировать формой треугольника. Вместо этого я решил создать простую треугольную форму в виде 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 и моб хром

Другой вариант — использовать градиенты фоновой подложки и гибкое позиционирование, чтобы убедиться, что треугольник всегда масштабируется до своего родительского контейнера. Независимо от того, насколько широким или узким вы сделаете этот контейнер, треугольник всегда масштабируется вместе с ним. Вот скрипка:

https://jsfiddle.net/29k4ngzr/

<div class="triangle-wrapper-100">
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</div>

.triangle-wrapper-100 {
      width: 100%;
    height: 100px;
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.triangle-right {
    right: 0px;
    background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
    width: 50%;
    height: 100px;
}
.triangle-left {
    left: 0px;
    background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
    width: 50%;
    height: 100px;
    transform: scaleX(-1);
}

Я взял ответ @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;