Подскажите пожалуйста как сделать такую трапецию с треугольником(не знаю как назвать такую фигуру) с помощью css? Спасибо https://i.stack.imgur.com/5289T.png
-
Может всё-таки svg?– eri13 ноя 2022 в 21:26
-
через svg конечно удобнее, но тут надо именно через css, сам всю голову уже сломал как это реализовать– TipTop8913 ноя 2022 в 21:41
-
зачем искать сложный путь? Ну можно наложить две фигуры и позиционировать их или сделать просто картинкой и не париться, ещё легче будет. Опять же, не понятно, зачем ты запариваешься и ради чего?– JZ_5213 ноя 2022 в 22:13
Добавить комментарий
|
2 ответа
У меня так вышло
.Rectangle_1{border-width:1 px;
border-color: rgb(255,0,0);
border-style: solid;
border-radius: 30px;
background-color: rgb(255, 0, 0);
position: absolute;
left: 224px;
top: 300px;
width: 527px;
height: 130px;
z-index: 2;
}
body{background: url('https://images.unsplash.com/photo-1453402524241-409afa47033b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80') no-repeat;
background-size: contain contain;
height: 780px;
width: 1170px;
}
#column{
width: 30px;
height: 500px;
z-index: 1;
background: brown;
justfy-content: center;
font-size: 1.5em;
transform: scale(0.4);
position: absolute;
top: 200px; left: 250px;
}
.goto{
width: 250px;
position: relative;
z-index: 3;
height: 50px;
margin: 15px;
padding: 3px;
text-align: center;
left: -120px;
}
.goto:nth-child(odd):after{right: -15px;content: '';}
.goto:nth-child(even):before{left: -15px;content: '';}
.goto, .goto:after, .goto:before{
border: 1px solid black;
display: block;
border-radius: 10px;
background: skyblue;
}
.goto:after, .goto:before{
position: absolute;
height: 45px;
width: 45px;
transform: rotate(45deg);
z-index: 2;
top: 5px;
}
<div id='column'>
<div class='goto'>Москоу</div>
<div class='goto'>Парыж</div>
<div class='goto'>там Дубай</div>
<div class='goto'>тут дубак</div>
<div class='goto'>а тут ваще ппц</div>
</div>
p.s. хотел еще рандомно понаклонять "указатели", но и так сойдёт:3