Скажите пожалуйста, как сделать вот так с помощью css, html?
Пытался сделать методом :after
через border
.
P.S. При том, что это будет целая страничка (width 100%
, height 100%
).
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуСкажите пожалуйста, как сделать вот так с помощью css, html?
Пытался сделать методом :after
через border
.
P.S. При том, что это будет целая страничка (width 100%
, height 100%
).
Например:
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
a {
color:#fff;
font-weight: bold;
text-decoration: none;
}
.wrap {
height: 100%;
display: flex;
text-align: center;
overflow: hidden;
}
.item {
height: 100%;
width: 35%;
margin: 0 -4.5%;
position: relative;
background: transparent;
transition:all .2s ease-in-out;
}
.item:hover {
z-index: 100;
background: red;
}
.item a {
display: block;
/* width: 100%;
height: 100%; */
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
z-index: 10;
padding-left: 15%;
padding-right: 15%;
}
.item a>span {
display: block;
position: relative;
top:50%;
transform:translateY(-50%);
}
.item:nth-of-type(1) {
-webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}
.item:nth-of-type(1) a{
background: url(https://images.unsplash.com/photo-1544891459-cf0d5d4b08e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60) center no-repeat;
-webkit-background-size: cover;
background-size: cover;
-webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}
.item:nth-of-type(2) {
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.item:nth-of-type(2) a{
background: url(https://images.unsplash.com/photo-1544893215-e70de63912db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60) center no-repeat;
-webkit-background-size: cover;
background-size: cover;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.item:nth-of-type(3) {
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.item:nth-of-type(3) a{
background: url(https://images.unsplash.com/photo-1544887786-5a1428e255e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60) center no-repeat;
-webkit-background-size: cover;
background-size: cover;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.item:nth-of-type(4) {
-webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.item:nth-of-type(4) a{
background: url(https://images.unsplash.com/photo-1544883549-74fdf9e6ebc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60) center no-repeat;
-webkit-background-size: cover;
background-size: cover;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
}
<div class="wrap">
<div class="item">
<a href="#">
<span>Кликабельная ссылка #1</span>
</a>
</div>
<div class="item">
<a href="#">
<span>Кликабельная ссылка #2</span>
</a>
</div>
<div class="item">
<a href="#">
<span>Кликабельная ссылка #3</span>
</a>
</div>
<div class="item">
<a href="#">
<span>Кликабельная ссылка #4</span>
</a>
</div>
</div>
transform:skewX()
компнуть – Cheg 23 сен '17 в 16:19overflow:hidden
– Andrey Fedorov 23 сен '17 в 17:06