Как обрезать углы?

219

12 февраля 2018, 02:27

Есть вот такие элементы на страницы

Как видите у них добавлено свойство border-radius: 50px 50px 0px 0px; Но получается, что углы становится закругленными, а как сделать чтоб было так:

чтоб углы были не закругленные, а ровные...

Answer 1

Можно использовать такой вариант. Но надо отметить тот факт, что не будет работать в EDGE && IE

* { 
  margin: 0; 
  padding: 0; 
} 
 
.clip-svg { 
  width: 0; 
  height: 0; 
} 
 
div { 
  width: 100px; 
  height: 60px; 
  background: #333; 
  padding: 0 10%; 
  margin: 60px auto; 
  -webkit-clip-path: polygon(0% 100%, 10% 0%, 90% 0%, 100% 100%); 
  clip-path: polygon(0% 100%, 10% 0%, 90% 0%, 100% 100%); 
  -webkit-clip-path: url("#polygon"); 
  clip-path: url("#polygon"); 
}

<div></div> 
 
<svg class="clip-svg"> 
	<defs> 
		<clipPath id="polygon" clipPathUnits="objectBoundingBox"> 
			<polygon points="0 1, 0.1 0, 0.9 0, 1 1" /> 
		</clipPath> 
	</defs> 
</svg>

При этом значения по высоте можно указывать в других единицах, не только в процентах. Но, любой представленный вариант зависит от ваших конкретных целей и задач. SVG добавлен для более лучшей поддержки браузеров, но, IE остается больной темой в этом вопросе.

И еще один более простой вариант:

* { 
  margin: 0; 
  padding: 0; 
} 
 
div { 
  height: 0; 
  width: 120px; 
  color: #fff; 
  text-align: center; 
  line-height: 60px; 
  border-bottom: 60px solid #333; 
  border-left: 25px solid transparent; 
  border-right: 25px solid transparent; 
  padding: 0; 
  margin: 60px auto; 
}

<div>Текст вкладки</div>

Данный пример с хорошей поддержкой браузеров, но, менее "гибкий". Повторюсь, все зависит от конкретных задач.

Answer 2

Через border-radius не вижу решения, но если мы знаем высоту элемента, то через псевдоэлементы получится так:

.rect { 
color: #fff; 
width: 300px; 
height: 20vh; /* высота элемента */ 
background-color: #000000; 
position: relative; 
margin-left: 40px; 
} 
.rect:after, .rect:before { 
content: ''; 
position: absolute; 
border: 10vh solid #000000; /* половина высоты элемента */ 
} 
.rect:after{ 
left: 100%; 
border-right-color: transparent; 
border-left-width: 20px;  /* длина наклонных */ 
border-right-width: 20px; /*    элементов    */ 
border-top-color: transparent; 
} 
.rect:before{ 
right: 100%; 
border-left-color: transparent; 
border-right-width: 20px;  /* длина наклонных */ 
border-left-width: 20px;   /*    элементов    */ 
border-top-color: transparent; 
}

<div class="rect"></div>

Answer 3

Вот еще вариант

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background: #ccc; 
} 
 
.wrap { 
  overflow: hidden; 
  position: relative; 
  top: 50px; 
  left: 60px; 
  color: #fff; 
  width: 300px; 
  height: 100px; 
  background-color: transparent; 
  perspective: 1000px; 
} 
 
.trapeze { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  height: 150%; 
  background-color: orange; 
  transform-origin: 50% bottom; 
  transform: rotateX(50deg); 
  border: 2px solid black; 
  box-sizing: border-box; 
} 
 
.text { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  text-align: center; 
  background-color: transparent; 
  line-height: 5; 
  font-size: 20px; 
}

<div class="wrap"> 
  <div class="trapeze"></div> 
  <p class="text">text</p> 
</div>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Динамический межстрочный интервал

Добрый день! Есть элемент с заранее известной высотой, но не известным текстом внутриНеобходимо динамически рассчитывать межстрочный интервал...

202

CSS

Стили как у button

Здравствуйте! Ситуация следующая:

292

MySQL

Неправильно работает запрос на MySQL 5.6 и выше

Данный запрос почему-то возвращает "Empty set" на mysql 56 и выше

262

MySQL

Не знаю как правильно построить SQL-запрос

Доброго времени суток! Прошу помочь, делаю себе проект, бэкенд на nodejs + sqliteВ проекте есть чат, без каналов, просто 1 на 1

232