Как показать эллипс внизу div
Я хочу иметь что-то вроде эллипса внизу div, но я хочу, чтобы он реагировал. У меня следующий код:
.home-title {
background-color: #ba173a;
position: relative;
width: 100%;
text-align: center;
}
.home-title:before {
content: "";
position: absolute;
bottom: -95px;
left: 33%;
margin-left: -939px;
height: 500px;
width: 2050px;
border-radius: 100%;
border: 100px solid #fff;
}
.g-font-weight-600{
font-weight: 600;
}
.g-pa-70{
padding: 70px;
}
.g-color-white{
color: white;
}<div class = "home-title">
<h2 class = "g-font-weight-600 g-pa-70 g-color-white">
This is some dummy text<br />This is more dummy text
</h2>
</div>Проблема в этом фрагменте заключается в том, что мне всегда нужно менять width на .home-title:before, чтобы все было правильно.
Любая идея, как я могу всегда иметь эллипс внизу div, независимо от размера экрана.
ОБНОВИТЬ
Мне нужен такой эффект в углах div
И не тот эффект:
Что вы имеете в виду под многоточием? Разве это не свойство, которое мы используем при переполнении текста?
@ThanveerShah Нет. Проверь скрипку.
Итак, вы хотите, чтобы эта маленькая форма была видна на каждом устройстве?
@ThanveerShah Проверьте скрипку и попробуйте изменить ее размер, и вы увидите, что эффект эллипса выглядит не очень хорошо.
Понял, я могу это исправить
Проверьте мой ответ и дайте мне знать
Ответы 2
Если я правильно понимаю ваш вопрос, это может быть достигнуто путем создания псевдоэлемента, который:
- имеет
border-radius, установленный на100%. Это приводит к тому, что кривизна адаптируется к границе блока псевдоэлемента (что бы это ни было) - установите ширину псевдоэлемента на
100% - установите фиксированное значение высоты, при этом небольшая высота создает псевдоэлемент с «прямоугольной границей». Это создаст область, в которой будет определяться эллипс / изогнутая форма по нижнему краю родительского элемента.
- вертикальное смещение псевдоэлемента от нижнего края родительского элемента на половину высоты псевдоэлемента. Это приводит к тому, что нижняя половина псевдоэлемента становится видимой, чтобы создать иллюзию изогнутого нижнего края на родительском элементе.
- раскрасьте фоновый цвет псевдоэлементов в соответствии с цветом родительского элемента:
.home-title {
background-color: #ba173a;
position: relative;
width: 100%;
text-align: center;
}
.home-title:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
display:block;
/* Color of curve to match parent background color */
background:#ba173a;
/* Causes the curve/radius to adaptively resize based on parent width */
border-radius: 100%;
/* Causes curve to expand adaptively to parent width */
width: 100%;
/* Set fixed height to twice that of curve depth */
height: 100px;
/* Offset ellipse to create illusion of curve */
bottom:-50px;
}
.g-font-weight-600{
font-weight: 600;
}
.g-pa-70{
padding: 70px;
}
.g-color-white{
color: white;
}<div class = "home-title">
<h2 class = "g-font-weight-600 g-pa-70 g-color-white">
This is some dummy text<br />This is more dummy text
</h2>
</div>Обновлять
Чтобы добиться «острых» углов (как показано в обновленном вопросе) в сочетании с отзывчивым изогнутым «нижним краем», вы можете изменить свой код следующим образом:
.home-title {
overflow: hidden;
/* Add padding to bottom to allow depth of curve to be visible */
padding-bottom: 50px;
}
/* Style nested div */
.home-title>div {
background-color: #ba173a;
position: relative;
width: 100%;
text-align: center;
}
.home-title>div:before {
content: "";
position: absolute;
bottom: 0;
/* Offset the ellipse left-ward by some amount */
left: -10%;
/* Set width percentage to exceed the parent width, plus twice the offset amount */
width: 120%;
border-radius: 100%;
background: #ba173a;
display: block;
height: 100px;
bottom: -50px;
}
.g-font-weight-600 {
font-weight: 600;
}
.g-pa-70 {
padding: 70px;
}
.g-color-white {
color: white;
}<div class = "home-title">
<div> <!-- UPDATE: Add nested element -->
<h2 class = "g-font-weight-600 g-pa-70 g-color-white">
This is some dummy text<br />This is more dummy text
</h2>
</div>
</div>https://jsfiddle.net/8Lm932jv/
Спасибо за ответ, но это не многоточие, это круг.
@Boky извините за это - на моем конце, кажется, отображаются эллипсы. Возможно, я неправильно понял ваш вопрос?
Я обновил свой вопрос.
@Boky, это помогает? jsfiddle.net/Lat3q21h
Это именно то, что я хочу.
@Boky cool - рад, что смог помочь. Я тоже только что обновил ответ :)
Сработал бы это и на вас, @Boky?
Это то, что вы имели ввиду?
.home-title {
background-color: #ba173a;
position: relative;
width: 100%;
text-align: center;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
/*
.home-title:before {
content: "";
position: absolute;
bottom: -95px;
left: 33%;
margin-left: -939px;
height: 500px;
width: 2050px;
border-radius: 100%;
border: 100px solid #fff;
}
*/
.g-font-weight-600 {
font-weight: 600;
}
.g-pa-70 {
padding: 70px;
}
.g-color-white {
color: white;
}<div class = "home-title">
<h2 class = "g-font-weight-600 g-pa-70 g-color-white">
This is some dummy text<br />This is more dummy text
</h2>
</div>Спасибо за ответ, но я не этого хочу. Я сказал это в обновленном вопросе.
Ладно, хорошо. Хотя, честно говоря, я не вижу разницы между моей версией и принятым ответом? За исключением того, что принятый использует отдельный псевдоэлемент для придания эллиптического вида. В любом случае, рад, что вы нашли ответ.
Проверьте первый ответ @Dacre (он похож на ваш), а затем проверьте обновленный.
Нет, не совсем "как" мой, как я уже сказал, я не использовал никаких дополнительных псевдоэлементов для достижения того же результата. Может это только я.
Каковы точные характеристики? По определению, возможно бесконечное количество эллипсов. Должно ли быть определенное соотношение? Приложить
<h2>(и как)? Пожалуйста, будьте конкретны. Мое первоначальное предположение было бы таким: используйте изображение с адаптивной шириной, но я не уверен, что это именно тот тип ответов, который вам нужен.