| Quark_ | 20.01.2017 11:33 |
Уголок на css через псевдоэлемент
Подскажите, плиз, как сделать такой уголок на css с помощью :before?
Уголок на css через псевдоэлемент
Подскажите, плиз, как сделать такой уголок на css с помощью :before?
|
Цитата:
- обычный красный квадрат :before - перекрыть его сверху белым фоном родителя |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.block{
position: relative;
width: 150px;
height: 150px;
background-color: #f00;
}
.block:before{
position: absolute;
content: "";
left: 20%;
top: 20%;
width: inherit;
height: inherit;
z-index: 2;
background-color: #fff; // цвет должен быть такой же как и твой фон
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
|
Цитата:
Т.к. z-index элемента и его псевдоэлемента будет как у элемента. :(
<style type='text/css'>
div {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
z-index: 2;
background-color: green;
}
div:before {
content: '';
display: block;
position: relative;
top: -10px;
left: -10px;
width: 50px;
height: 50px;
z-index: 1;
background-color: red;
}
</style>
<div></div>
|
Такой вот шахер-махер предложу...
<style type='text/css'>
div {
width: 100px;
height: 100px;
margin: 100px;
background-color: green;
}
div:before,
div:after {
content: '';
display: block;
position: relative;
left: -10px;
background-color: red;
}
div:before {
top: -10px;
width: 50px;
height: 10px;
}
div:after {
top: -20px;
width: 10px;
height: 50px;
}
</style>
<div></div>
|
Я бы сделал так:
div {
background: #FFF;
height: 100px;
position: relative;
width: 100px;
}
div::before {
border: 5px solid red;
border-bottom: none;
border-right: none;
box-sizing: border-box;
content: '';
height: 20px;
left: -7px;
position: absolute;
top: -7px;
width: 20px;
}
|
Цитата:
|
| Часовой пояс GMT +3, время: 11:51. |