Я хочу реализовать div
в форме, показанной на следующем рисунке ...
... но я бы хотел сделать это без изображений, просто CSS . Я тестировал с clip-path
, но можно сделать только прямые линии или окружности. Я использовал псевдоклассы, такие как after
и before
, но я не могу получить правильную форму.
Как выполнить эту форму в CSS , без необходимости изображений?
Я пытался выполнить эту форму следующим образом:
body {
background-color: #F7F0D0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.inverted-border-radius {
position: relative;
height: 100px;
width: 325px;
background-color: #F66969;
border-radius: 25px 25px 25px 0;
}
.inverted-border-radius::before {
content: "";
position: absolute;
background-color: transparent;
bottom: -50px;
height: 50px;
width: 25px;
border-top-left-radius: 25px;
box-shadow: 0 -25px 0 0 #F66969;
}
Border inverted
Таким образом, я получаю верхнюю правую кривую и верхнюю левую кривую, получая ее, давая ей border-radius
на этом кончике, но наклон я все еще не знаю Как это сделать С clip-path
фигура проигрывает border-radius
.
Ты можешь играть с положениями контейнеров, которые ты не выбираешь, div, span, и т.д. абсолютно и относительно colocГЎndolos, как ты хотел, и давать ему background вышеупомянутым контейнерам с цветом, который у них должен быть, чтобы позже давать им форму с например "border-radius" и width и height конкретные, имея в виду, что comenzarГЎ из-за верхнего левого угла объекта описывая moviento как moviento стрелок часов, оставаясь таким образом asГ - в этом примере:
.forma{
position:relative;
top:2em;
left:3em;
width:5em;
height:5em;
border-radius: 10px 30px 15px 150px;
background-color:#ccc;
border:2px solid red;
}
<div class="forma"> </div>
Ты мог пробовать это со свойством clip-path
и создавая один polГ-gono таким образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejemplo</title>
<style>
.figura-rara {
background-color: steelblue;
height: 200px;
clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);
}
</style>
</head>
<body>
<div class="figura-rara">
</div>
</body>
</html>
Замечаний
Давайте Верить с помощью div
в один polГ-gono, что выполнил следующие правила:
Общеизвестной: AГєn я не встречаю ответа, чтобы производить эффект края углов
clip-path
– Aprendiz
30.11.2019, 03:36