0

Подскажите пожалуйста как сделать такую трапецию с треугольником(не знаю как назвать такую фигуру) с помощью css? Спасибо https://i.stack.imgur.com/5289T.png

3
  • Может всё-таки svg?
    – eri
    13 ноя 2022 в 21:26
  • через svg конечно удобнее, но тут надо именно через css, сам всю голову уже сломал как это реализовать
    – TipTop89
    13 ноя 2022 в 21:41
  • зачем искать сложный путь? Ну можно наложить две фигуры и позиционировать их или сделать просто картинкой и не париться, ещё легче будет. Опять же, не понятно, зачем ты запариваешься и ради чего?
    – JZ_52
    13 ноя 2022 в 22:13

2 ответа 2

1

У меня так вышло

.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;
}
0

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.