Можете ли вы сделать круговые ограничения (как показано на рисунке выше) с помощью CSS? Как?
Есть ли способ сделать это с помощью border-bottom
? border-radius
производит этот стильный эффект вместо:
Можете ли вы сделать круговые ограничения (как показано на рисунке выше) с помощью CSS? Как?
Есть ли способ сделать это с помощью border-bottom
? border-radius
производит этот стильный эффект вместо:
РЕДАКТИРОВАТЬ: Я неправильно понял, что hpique wated, но это должно работать:
#test {
font-size: 50px;
background: transparent;
border-radius: 10px;
height: 10px;
width: 255px;
box-shadow: 0 55px 0 0 #000;
font-family: sans-serif;
}
<div id="test">Hello world</div>
Нет. Если вы хотите сделать это исключительно с помощью HTML + CSS, вам понадобится дополнительный элемент для сидения под текстом, а затем применить к нему кривизну и цвет фона. В качестве альтернативы, и, как мне кажется, вы можете использовать изображение.
Да, возможно. Добавьте элемент блока с помощью :after
без содержимого и укажите желаемую ширину/высоту:
h1:after {
content:"";
float:left;
background:green;
width:100%;
height:6px;
border-radius: 3px;
}
Заклинание здесь: https://jsfiddle.net/toqL0agq/1/
Как и ответ youtag, мое решение использует псевдоэлементы, но моя подчеркивание только обрабатывает длину текста и может быть перенесена на несколько строк (с подчеркиванием, выполняемым под каждой строкой текста).
В принципе, я вручную закрываю концы границы элемента кругами псевдоэлементов до и после элемента:
h1 a {
text-decoration: none;
position: relative;
border-bottom: 15px solid;
padding-bottom:3px;
}
h1 a:hover, h1 a:focus {
border-bottom: 15px solid #eb6d32;
}
h1 a:before, h1 a:after {
content: '';
height: 15px;
width: 15px;
background-color: currentColor;
border-radius: 15px;
position: relative;
display: inline-block;
vertical-align: text-bottom;
margin-bottom: -18px;
}
h1 a:before {
left: .2ex;
margin-left: -.4ex;
}
h1 a:after {
margin-right: -.4ex;
right: .2ex;
}
Я использую left
и right
для псевдоэлементов, поэтому концы не выходят слишком далеко за текст.
Смотрите мой codepen.
вы можете сделать это, используя div под текстом и установив свой радиус границы до 2000 пикселей. я думаю, что будет проще
HTML:
<div class="wrapper">
<span>Hell World</span>
<div class="underline"></div>
</div>
CSS
.underline{
height:0px;border: 3px solid black;
border-radius: 2000px;
}
.wrapper{
display:inline-block;
}
JQUERY SNIPPET:
var arbitrarynumber = 5
$('.underline').width($('.underline').parent().width()-arbitrarynumber)
Я попытался сделать то же самое с принятым ответом, но обнаружил, что все еще получаю нежелательный результат, показанный в вопросе. Вы можете достичь этого с помощью класса псевдо:
HTML:
<span class="kicker">Hello World</span>
CSS:
.blog__kicker {
font-size: 1rem;
position: relative;
&:after {
content: '';
display: block;
width: 100%;
height: 6px;
border-radius: 6px;
background: #000;
position: absolute;
bottom: 0;
left: 0;
}
}