3

Мне нужно сверстать вот такую фигуру, но я не знаю как срезать углы. На ум приходит border через after и before с overflow:hidden, но не знаю, как это реализовать.

введите сюда описание изображения

Вот моя фигура с фоном:

.title-head {
	width: 358px;
	height: 80px;
	background-image: linear-gradient(180deg, #d6c0a6 0%, white 100%, #ff3f00 100%, white 100%);
}
<div class="title-head">

</div>

4

2 ответа 2

3

CSS Transform приходит на помощь, вот пример:

.title-head {
    transform: perspective(224px) rotateX(-20deg);
    width: 358px;
    height: 80px;
    background-image: linear-gradient(180deg, #d6c0a6 0%, white 100%, #ff3f00 100%, white 100%);
    margin: 0 auto;
}
<div class="title-head"></div>

Если надо, чтобы поверх был текст, делаем что то вроде:

.container {
  position: relative;
  margin: 2% auto;
  width: 358px;
}

.title-head {
  transform: perspective(224px) rotateX(-20deg);
  position: absolute;
  z-index: 1;
  top: 0;
  width: inherit;
  height: 80px;
  background-image: linear-gradient(180deg, #d6c0a6 0%, white 100%, #ff3f00 100%, white 100%);
}

.text {
  position: relative;
  z-index: 2;
  top: 0;
  width: 100%;
  margin: 0 auto;
  padding: 5.5% 3%;
  font-size: 1.4em;
  font-family: Arial;
  color: #5D1600;
  text-align: center;
}
<div class='container'>
  <div class='text'>Заголовок</div>
  <div class='title-head'></div>
</div>

3

Так подойдет?

Только здесь угол другой.

.title-head {
  position: relative;
    width: 358px;
    height: 80px;
    background-image: linear-gradient(180deg, #d6c0a6 0%, white 100%, #ff3f00 100%, white 100%);
}

.title-head:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 80px solid transparent;
    border-left: 80px solid white;
    width: 0;
}
.title-head:after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid transparent;
    border-right: 80px solid white;
    width: 0;
}
<div class="title-head"></div>

Ваш ответ

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

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