0

Я сделал свой класс для подчёркивания текста. Хочу у него округлить края, но округляются только нижние. Поможете?

.red-underscore
    background-image: linear-gradient(120deg, red 0%, red 100%);
    background-repeat: no-repeat;
    background-size: 100% 15px;
    background-position: 0 100%;
    border-radius: 5px;

введите сюда описание изображения

1
  • Нормально всё округляется. Просто он занимает высоту больше, чем весь элемент, поэтому края не видно. если сделать не background-size: 100% 15px;, а background-size: 100% 22px; - станет понятно. Но без разметки html и бОльшего кода css советовать что-то сложно 13 июл 2019 в 11:47

1 ответ 1

0

Только нижние округляются потому, что это края всего элемента с текстом, а не градиента. Грубо говоря, градиент не сам имеет скругленные края, а выглядывает из-под "трафарета" в форме блока с текстом. Попробуйте псевдоэлементы:

.red-underscore {
    width:100px;
    color:#eee;
    font-size:40px;
    position:relative;
    padding-top:0.5em;
    padding-right:1em;
    padding-bottom:7px;
    padding-left:10px;
}


.red-underscore:before {
    content:'';
    background-image: linear-gradient(120deg, blue 0%, red 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    border-radius: 5px;
    height:15px;
    position:absolute;
    right:1em;
    bottom:7px;
    left:10px;
    z-index:-1;
}


.red-underscore:after {
    content:'';
    background-color:#000;
    border-radius: 5px;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    z-index:-2;
}
<div class="red-underscore">TEST</div>

1
  • Спасибо, сильно помог!
    – Munoon
    18 июл 2019 в 11:46

Ваш ответ

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

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