Вёрстка
- 3 ответа
- 0 вопросов
2
Вклад в тег
<div class="block">
some text
<span class="triangle"></span>
</div>.block {
width: 400px;
padding: 10px;
background: #fff;
min-height: 100px;
position: relative;
border: 1px dashed #aaa;
margin: 10px 10px 10px 40px;
}
.block span.triangle {
width: 0;
height: 0;
display: block;
position: absolute;
top: 30px; left: -30px;
border-bottom: 30px solid #fff;
border-left: 30px solid transparent;
}
.block span.triangle:before {
content: '';
width: 40px;
display: block;
position: absolute;
top: 15px; left: -35px;
border-top: 1px dashed #aaa;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.block span.triangle:after {
content: '';
width: 30px;
display: block;
position: absolute;
top: 30px; left: -30px;
border-top: 1px dashed #aaa;
}<div class="container">
<div class="block">
<img src="http://groundctrl.s3.amazonaws.com/clients/justin-timberlake/media/03/11/feature_images/assets/original.VdBDxo14evIQMNj14uZiR-N623UIA0uve9ZaHPbqpGs.jpg" alt="">
<a href="#"><span>Some text</span></a>
</div>
<div class="block">
<img src="http://groundctrl.s3.amazonaws.com/clients/justin-timberlake/media/01/06/feature_images/assets/original.rcb9s2aCheVeAzuiWpf1nR_qLoDvawEYuRuXApi6tcI.jpg" alt="">
<a href="#"><span>Some text</span></a>
</div>
<div class="block">
<img src="http://groundctrl.s3.amazonaws.com/clients/justin-timberlake/site/home/JoinTheTNKids.jpg" alt="">
<a href="#"><span>Some text</span></a>
</div>
<div class="block">
<img src="http://groundctrl.s3.amazonaws.com/clients/justin-timberlake/site/home/tourPhotos.jpg" alt="">
<a href="#"><span>Some text</span></a>
</div>
</div>.container:before,
.container:after {
clear: both;
content: '';
line-height: 0;
display: block;
}
.block {
width: 25%;
float: left;
background: #aaa;
position: relative;
}
.block img {
display: block;
max-width: 100%;
}
.block a {
top: 0;
left: 0;
opacity: 0;
color: #fff;
width: 100%;
height: 100%;
display: block;
text-align: center;
visibility: hidden;
position: absolute;
text-decoration: none;
background: rgba(0,0,0,.5);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.block a span {
color: #fff;
padding: 3px 5px;
position: absolute;
bottom: 0; right: 0;
background: rgba(143, 0, 0, 1);
}
.block:hover a {
opacity: 1;
visibility: visible;
}
