Как сделать фаски у прямоугольного блока?

Question

[Евгений Обыкновенный]

Есть свойство border-radius, которое позволяет закруглять углы. Есть ли свойство, которое делает прямые фаски? Можно ли без изображений в бэкграунде сделать такое?

Answer 1

[dom1n1k]

Одним свойством - нет, нельзя.
Lea Verou пыталась пролоббировать в стандарт такую фишку, но пока что вроде бы решили отложить.
lea.verou.me/2013/03/border-corner-shape-is-in-dan...

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

Comments

[Алексей]

Svg в плане написать сам блок? или изменить css немного?

[dom1n1k]

SVG-картинку положить в фон или в абсолютно спозиционированный элемент.

Answer 2

[Михаил Еникеев]

Может поможет так!

<div id="orange"></div>

#orange {
	width: 100px;
	height: 100px;
	background: #FF6A00;
	position: relative;
}
 
#orange:before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0;    
	border-bottom: 29px solid #FF6A00;
	border-right: 30px solid #F3F5F6 ;
	width: 70px;
	height: 0;
}
 
#orange:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;    
	border-right: 30px solid #eee;
	width: 70px;
	height: 0;
}

Ссылка на пример https://jsfiddle.net/miha8722/ezbnduo9/

Answer 3

[trushka]

Ещё вот так можно извратиться..
https://jsfiddle.net/trushka/k6ft6yac/3/

Хотя, щac подумал, лучше градиентами, вот так примерно, хотя, тут всё равно разная толщина косых "бордеров" получается в хроме и FF.. Хотя, есл 3px сделать - уже получше будет..

Answer 4

[Олег]

В особо извращенной форме https://jsfiddle.net/joomla/bmvhk82L/2/

Answer 5

[GreatRash]

codepen.io/GreatRash/pen/EgxaPd
-----------------------------------------------------
codepen.io/GreatRash/pen/ozNgXR