Как обвести блок по срезанному углу?

Question

[usedtoknow]

https://jsfiddle.net/y3btkm6c/137/

как обвести границу по срезанному углу?

Answer 1

[BigSmoke]

С помощью clip-path еще можно.

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
</div>

.container {
  width: 500px;
  height: 500px;
  position: relative;
}
.a {
  display: none;
  width: 500px;
  height: 500px;
  background-color: black;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%);
  position: absolute;
  top: 0;
  left: 0;
}
.b {
  width: 494px;
  height: 494px;
  background-color: yellow;
  position: absolute;
  top: 3px;
  left: 3px;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%);
}
.container:hover .a {
  display: block;
}

Answer 2

[Svetley]

В данном случае никак. Ищи другой способ создания уголка.

Comments

[usedtoknow]

не подскажешь еще способ?)

[AngReload]

usedtoknow, можно сделать фон с помощью SVG или linear-gradient.

[Svetley]

usedtoknow, покажи что в итоге должно быть

[usedtoknow]

Svetley, так должен при наведении обводиться блок со срезанным углом

[Svetley]

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

Answer 3

[hesrun]

Под низ белого треугольника, положить треугольник в цвет, чтоб у него было видно только одно ребро

Answer 4

[sinneren]

Колхоз, конечно, но на скорую руку так.

* {
	box-sizing: border-box;
}
.block {
	background-color: red;
	height: 200px;
	width: 300px;
	position: relative;
}

.block:before {
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	border-top: 30px solid white;
    border-right: 30px solid red;
	z-index: 1;	
}

.block:after {
	content: '';
	display: none;
	position: absolute;
	left: -7px;
	top: 14px;
	width: 42px;
	border-top: 1px solid black;
	transform: rotate(-45deg);
	z-index: 1;	
}
.block:hover {
	border: 1px solid black;
}

.block:hover:before {
	left: -1px;
	top: -1px;
}
.block:hover:after {
	display: block;

}

Comments

[sinneren]

Ну а вот решение для углов с другим способом
https://stackoverflow.com/questions/7324722/cut-co...

Answer 5

[AngReload]

Answer 6

[Nikita-Fast]

https://codepen.io/topicstarter/pen/QZEQBb так можно

Answer 7

[Денис Васильев]

Я что-то похожее делал для иконки файла
https://codepen.io/corvus-007/pen/vVKRBP?editors=1100