@usedtoknow

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

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

как обвести границу по срезанному углу?
  • Вопрос задан
  • 154 просмотра
Пригласить эксперта
Ответы на вопрос 7
@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;
}
Ответ написан
svetley
@svetley
Амбициозный лентяй)
В данном случае никак. Ищи другой способ создания уголка.
Ответ написан
@hesrun
Под низ белого треугольника, положить треугольник в цвет, чтоб у него было видно только одно ребро
Ответ написан
sinneren
@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;

}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы