Кнопка CSS - прозрачная стрелка с обеих сторон

Я пытаюсь создать кнопку ниже, используя псевдоэлементы до и после. Я не хочу манипулировать HTML DOM. Я ищу решение с чистым CSS.Кнопка CSS - прозрачная стрелка с обеих сторон

Как это можно сделать в настоящее время белой каймой цвета этих треугольников прозрачным?

// EDIT:marked topic не отвечает на мой вопрос, потому что мне нужен другой угол, чем просто поворот квадрата. Это также непрозрачно. Я не хочу манипулировать DOM.

// РЕШИТЬ: Это результат после использования Кейт Millers решение:

// edit2: Существует еще одна проблема, с решением я использую в настоящее время:

Есть ли способ исправить границу ширины треугольников (влево и вправо)? Здесь вы можете увидеть, как изменяется размер до 14,4 и 26.4px, 26.4px:

источник

2016-08-23 Simon Hagmann

Я не должен самостоятельно продвигать, но вы взглянули на мой ответ в этой теме? Он не использует SVG, и угол не равен 90deg, как в квадрате. Он использует два перспективных вращающихся псевдоэлемента. – Harry

Вы также можете посмотреть этот вариант - http://stackoverflow.com/questions/38006705/how-to-make-a-button-with-an-obtuse-angle/38006789#38006789. Ваш вопрос ** не является ** обманом этого, но он даст вам представление о том, как создавать треугольники с углом, отличным от 90 градусов. – Harry

Спасибо @ Харри, ваше решение выглядит хорошо, но у меня есть две проблемы с этим: 1. Это фиксированная ширина 2. изменение угла после изменения ширины. –

Лучшим решением является изменение треугольников (так что вы добавляете верхний и нижний треугольники, соответствующие кнопке, но не по бокам). Вы можете технически создавать «прозрачные» треугольники, но вы не можете использовать эту прозрачность для другого объекта.

Одна из самых важных вещей, которые я изменила, заключалась в том, что цвет фона и добавление кнопки должны применяться к элементу span (что означает, что каждой кнопке потребуется внутренний интервал), а не .btn.

Если вы замените все свои CSS на кнопки с нижеследующим, у вас будет решение, которое доставит вам как минимум 90% пути. Угол не идеален, потому что он останавливается на тексте. Если вы хотите сделать угол действительно совершенным, вам, вероятно, понадобится сделать некоторое абсолютное позиционирование, что сделало бы его грязным, когда ваши размеры кнопок изменились.

Некодированный способ, которым вы также можете достичь этого, - создать .png или.svg с треугольниками, которые соответствуют цвету вашей кнопки и вставляют их в: before и: after с контентом: '';

body { margin: 20px; background:#c2c2c2; } 
 

 
.btn { 
 
    display: inline-block; 
 
    text-shadow: 0 1px 0 #000; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
} 
 

 
.btn { 
 
    padding: 11px 40px; 
 
    color: #fff; 
 
    position: relative; 
 
    background: #a00; 
 
} 
 

 
.btn:before, .btn:after { 
 
    content: ''; 
 
    border-top: 20px solid #a00; 
 
    border-bottom: 20px solid #a00; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
.btn:before { 
 
    border-left:20px solid transparent; 
 
    left: -20px; 
 
} 
 

 
.btn:after { 
 
    border-right:20px solid transparent; 
 
    right:-20px; 
 
} 
 

 

 
.btn.inset:before, .btn.inset:after { 
 
    content: ''; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
.btn.inset:before { 
 
    border-right:20px solid #a00; 
 
    left: -40px; 
 
} 
 

 
.btn.inset:after { 
 
    border-left:20px solid #a00; 
 
    right:-40px; 
 
}

<div class="btn">Text in my little banner button</div> 
 
<div class="btn inset">Text in my little banner button</div>

источник

2016-08-23 18:32:54

Спасибо, Кейт за ваше решение, но все еще есть манипуляция с DOM nessessary (span). Можно ли избавиться от этого тега? –

ДА! Я обновил его, и теперь вам не нужен тег span, и он делает углы идеальными. Вам просто нужно убедиться, что левая и правая: это отрицание того, что вы делаете для полей border-right: или border-left: values. –

Хорошо спасибо за подсказку. Могу ли я также просто отобразить границу этой фигуры, или я действительно использую код из отмеченной темы (OP)? –

Я не использую, и я не очень знаком, МЕНЬШЕ ... но вы можете создать подобный элемент с помощью span и обертку с псевдоэлементами. Для каждой стороны требуется 2 треугольника (отсюда и диапазон).

body { margin: 20px; background: #ddd; } 
 

 
.btn { 
 
    display: inline-block; 
 
    padding: 11px 40px; 
 
    color: #fff; 
 
    position: relative; 
 
    background: #a00; 
 
    text-shadow: 0 1px 0 #000; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
} 
 

 
.btn:after, 
 
.btn span:after, 
 
.btn:before, 
 
.btn span:before { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    display: block; 
 
    position: absolute; 
 
    right: 0; 
 
    border: 10px solid transparent; 
 
} 
 
.btn:after { 
 
    top: 0; 
 
    border-right-color: #ddd; 
 
    border-bottom-color: #ddd; 
 
    } 
 
.btn span:after { 
 
    bottom: 0; 
 
    border-right-color: #ddd; 
 
    border-top-color: #ddd; 
 
} 
 
.btn:before { 
 
    top: 0; 
 
    left:0; 
 
    border-left-color: #ddd; 
 
    border-bottom-color: #ddd; 
 
    } 
 
.btn span:before { 
 
    bottom: 0; 
 
    left:0; 
 
    border-left-color: #ddd; 
 
    border-top-color: #ddd; 
 
}

<div class="btn"><span>Text in my little banner button</span></div>

Я понимаю, что концы не действительно прозрачны, они просто совпадают цвет фона появляются прозрачный.

источник

2016-08-23 17:00:45 Scott

Спасибо за ваш ответ @Scott. Стрелки не очень прозрачны, поэтому между формой и фоном все еще есть пробел. В этом случае я также не могу изменить структуру DOM. –

Без проблем, Саймон. Я не знаю, как вы могли бы это сделать с * действительно * прозрачными концами и * не * изменяя DOM без использования изображений/спрайтов. – Scott

Кнопка CSS - прозрачная стрелка с обеих сторон

ответ

Смежные вопросы