Обрезать углы border CSS

463

21 апреля 2017, 18:27

Каким методом можно обрезать углы у border на css. Или лучше через canvas, но все же мне кажется что бы без заморочек делать каждую отдельную на canvase, лучше на css??И кстати задний фон меняющийся, вставкой псевдоэлемента треугольника не катит.

Answer 1

Привет, ты можешь это сделать через css. Используя border-radius можно задавть уровень скругления каждого угла отдельно.

border-radius: 30px 0px 30px 0px;

Что эквивалентно

border-top-left-radius:30px;
border-top-right-radius:0;
border-bottom-right-radius:30px;
border-bottom-left-radius:0;

Пример https://codepen.io/whereismymind7/pen/XRXwwK

Документация https://www.w3schools.com/cssref/css3_pr_border-radius.asp

Answer 2

.wrapper { 
  position: relative; 
  margin: 50px; 
  width: 100px; 
  height: 40px; 
  line-height: 40px; 
  font-family: Roboto, sans-serif; 
  font-size: 16px; 
  font-weight: bold; 
  text-align: center; 
  border-top: 2px solid #f00; 
  border-bottom: 2px solid #f00; 
  transform-origin: 50% 100% 0; 
  transform: rotate(270deg); 
} 
.wrapper::before, 
.wrapper::after { 
  position: absolute; 
  content: ''; 
  width: 15px; 
  height: 27px; 
} 
 
.wrapper::before { 
  left: -15px; 
  bottom: -2px; 
  border-left: 2px solid #f00; 
  border-bottom: 2px solid #f00; 
} 
 
.wrapper::after { 
  right: -15px; 
  top: -2px; 
  border-top: 2px solid #f00; 
  border-right: 2px solid #f00; 
} 
 
.corner { 
  position: absolute; 
  width: 21px; 
  height: 21px; 
  transform: 50% 50% 0; 
  transform: rotate(45deg); 
} 
 
.left { 
  top: 3px; 
  left: -11px; 
  border-left: 2px solid #f00; 
} 
 
.right { 
  bottom: 3px; 
  right: -11px; 
  border-right: 2px solid #f00; 
}

<div class="wrapper">ГЛАВНАЯ 
  <div class="left corner"></div> 
  <div class="right corner"></div> 
</div>

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

Все вопросы

ТОП-10

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

jQuery вертикальное меню (аккордеон)

Помогите исправить jQuery, не могу разобраться

448

HTML

Стилизация радиокнопок CSS

Подскажите пожалуйста, как стилизовать радиокнопки подобным образом?

341

HTML

Отображение галереи товаров в Wooocommerce

Всем доброго времени сутокНужно вывести 2 картинки товара на странице товара

271

HTML

Как выровнять интерльяж между блоками?

Есть 2 блока в футере: в первом - список меню, а во втором - сплошной текст адресаКак сделать так, чтобы интерлиньяж текста стал равный меню...

285