2

Обычно рисуется с помощью border:

#trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}
<div id="trapezium"></div>

Как нарисовать трапецию с границей на сss? Т.е. border поверх border

2
  • Не понятна суть вопроса
    – kizoso
    29 авг 2017 в 8:19
  • подкорректировал вопрос, в общем, нужна трапеция с границей поверх нее 29 авг 2017 в 8:24

2 ответа 2

1

Например:

#trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
  
  position: relative;
  
}


#trapezium:after {
  content: '';
  z-index: -1;
  position: absolute;
  top:-2px;
  left:-64px;
  bottom: -2px;
  
  height: 0;
  width: 124px;
  border-bottom: 124px solid #000;
  border-left: 62px solid transparent;
  border-right: 62px solid transparent;
}
<div id="trapezium"></div>

0

#trapezium1 {
    position: absolute;
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

#trapezium2 {
    position: absolute;
    height: 0;
    left: 25px;
    width: 105px;
    border-bottom: 100px solid #000;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 10px solid transparent;
}
<div id="trapezium1"></div>
<div id="trapezium2"></div>

Ваш ответ

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

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