CSS3 перевернутый закругленный угол
-
05-10-2019 - |
Вопрос
Есть ли способ сделать перевернутый закругленный угол в CSS3, что приблизительно, как нижний левый угол в (неочищенный) рисунок ниже?
/-------\
| |
| |
| |
| ______/
|/ <---The left side is flush (straight), the slant should be rounded
Возможно, пограничный радиус может быть в сочетании с Эта техника?
Редактировать: Я не ищу речевого пузыря, а скорее просто способ кривой правой стороны точки на левом нижнем углу.
Решение
Ну, это чисто безумие, но, безусловно, есть способы достичь этого :-) не крест-браузеро, но давайте посмотрим:
Наша отметка:
<div id="bubble">
<p>This is madness!</p>
</div>
Наши CSS:
#bubble {
width:200px;
height:100px;
border:1px solid #000;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
#bubble p {
margin: 1em;
font-family:Comic Sans MS;/* well, madness it is! */
}
#bubble:before {
content:'';
border:20px solid;
border-color:#fff transparent transparent;
position:absolute;
top:110px;
left:25px;
z-index:2;
}
#bubble:after {
content:'';
border:20px solid;
border-color:#000 transparent transparent;
position:absolute;
top:111px;
left:25px;
z-index:1;
}
Результат:http://jsfiddle.net/mrlwy/
Я только проверил это в Firefox 3.6.3, но идея ясна :-)
Вот взять два:
#bubble {
width:200px;
height:100px;
border:1px solid #000;
position:relative;
-webkit-border-radius:20px 20px 20px 0;
-moz-border-radius:20px 20px 20px 0;
border-radius:20px 20px 20px 0;
}
#bubble p {
margin: 1em;
font-family:Comic Sans MS;
}
#bubble:before {
content:'';
width:20px;
height:20px;
background:#fff;
border-left:1px solid #000;
position:absolute;
top:100px;
left:-1px;
}
#bubble:after {
content:'';
-webkit-border-radius:20px 0 0 0;
-moz-border-radius:20px 0 0 0;
border-radius:20px 0 0 0;
border:solid #000;
border-width:1px 0 0 1px;
width:20px;
height:19px;
position:absolute;
top:100px;
left:0;
}
И результат: http://jsfiddle.net/ajen7/
Возможно, это может быть улучшено во многих отношениях:
- Сделайте это кросс-браузер (+ WebKit и Opera, по крайней мере)
- Это может работать в IES, без округновений, однако, с помощью чего-то вроде этого http://code.google.com/p/ie7-js/ (Для того, чтобы создать контент на работу).
- Чтобы узнать, как это может работать с гибкой высотой.
- Чтобы изменить шрифт-семейную декларацию :-)
Другие советы
Я еще не могу комментировать, но вот новый ответ (в отношении Gryzzlys ответа):
Первый пример gryzzlys не обрабатывал разные цвета фона (для фона и пузыря).
Но второй делает. Вот пример с применяемыми цветами фона:
(Я также добавил свойства по границам-радиусу так, чтобы он оказал границы для других браузеров, чем Firefox).
Это достигает эффекта в ФФ. Используйте соответствующие border-radius
Варианты для других браузеров. По сути вы используете 3 div
Система, один с таким же цветом фона. Работает только для фона с плоским цветом.
<div class="top">some text here</div>
<div class="bottom"><div class="bottom2"></div></div>
И CSS:
body
{
background-color:red;
}
.top
{
display: block;
width: 200px;
height: 50px;
background-color:white;
padding:5px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
}
.bottom
{
display: block;
width: 20px;
height: 20px;
background-color: white;
}
.bottom2
{
display: block;
width: 20px;
height: 20px;
background-color: red;
-moz-border-radius-topleft:20px;
}
Если вы пытаетесь достичь такого рода вида (речи шар), лучше всего использовать изображение для этого :)
Есть способы, которыми вы могли бы решить эту проблему, используя только CSS. Я решил использовать технику для вкладок - но может быть легко адаптирован для речевых пузырей.
Я охвачу основной пример здесь, как сделать Обратный радиус границы в CSS (здесь). Отказ Это использует трюк с размером границы, чтобы использовать внутри, вам, возможно, придется сделать некоторое позиционирование, чтобы заставить его работать правильно, однако, как вы можете увидеть его возможным.