I want to make the 'featured' section slant. I need the top one to be slanted as well. On my button-slanted class I have added background: linear-gradient in order to hide the other side of the border but I can't to figure out how to hide the top side of the border. Any help will be appreciated. Thanks!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 80%;
margin: 50px auto;
}
.header {
font-size: 22px;
color: #462681;
margin-bottom: 50px;
text-align: center;
}
.row {
display: flex;
gap: 2em;
justify-content: center;
flex-wrap: wrap;
}
.card {
margin-bottom: 30px;
width: 23%;
border: 2px solid #ccc;
transition: 0.2s;
border-radius: 3px;
}
.slant-container {
transform: skewX( -3deg);
}
.button-default {
color: black;
font-weight: 900;
background-color: #ffebb5;
text-align: center;
padding: 5px 10px;
margin: 10px;
display: inline-block;
}
.button-slanted {
background: linear-gradient( -130deg, transparent, transparent 40px, #ffebb5 20px, #ffebb5 20px);
width: 263px;
position: absolute;
margin-left: 12rem;
transform: rotate(40deg);
outline: none;
}
.button-slanted-content {
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
}
.info {
float: left;
margin: 5px;
width: 20px;
}
.card-border {
background: #fa6400;
}
.card-border-2 {
background: #0491ff;
}
#top-border {
height: 15px;
}
h3 {
color: rgba(0, 0, 0, 0.0);
}
img {
width: 100%;
height: 30vh;
}
.card-body {
padding: 30px 10px;
text-align: center;
font-size: 18px;
}
.card-title {
border-bottom: 1px solid #ccc;
}
h1 {
margin: 20px;
}
.card-body .btn {
display: block;
color: #fff;
margin-top: 30px;
padding: 10px 15px;
border-radius: 8px;
text-decoration: none;
background: linear-gradient(to right, #ff416c, #ff4b2b);
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.25);
}
/* RESPONSIVE MEDIA */
@media screen and (max-width:800px) {
.card {
width: 40%;
}
}
@media screen and (max-width:540px) {
.container {
width: 100%;
}
.heading {
padding: 20px;
font-size: 20px;
}
.card {
width: 80%;
}
}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="header">
<h1>Here to help</h1>
</div>
<div class="row">
<div class="card">
<div class="card-border" id="top-border">
<h3>none</h3>
</div>
<div class="card-img">
<img src="https://i.postimg.cc/G9nspRT4/photo-1547082688-9077fe60b8f9-ixlib-rb-1-2.jpg" alt="">
</div>
<div class="card-title">
<h1>Helping People</h1>
</div>
<div class="card-body">
<svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
<a href="#" class="btn">Read more</a>
</div>
</div>
<div class="card">
<div class="card-border-2" id="top-border">
<h3>none</h3>
</div>
<div class="slant-container">
<div class="button-default button-slanted">
<span class="button-slanted-content">FEATURED!</span>
</div>
</div>
<div class="card-img">
<img src="https://i.postimg.cc/Sst6kHG9/photo-1582213782179-e0d53f98f2ca-ixlib-rb-1-2.jpg" alt="">
</div>
<div class="card-title">
<h1>Together</h1>
</div>
<div class="card-body">
<svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
<a href="#" class="btn">Read more</a>
</div>
</div>
<div class="card">
<div class="card-border" id="top-border">
<h3>none</h3>
</div>
<div class="slant-container">
<div class="button-default button-slanted">
<span class="button-slanted-content">FEATURED!</span>
</div>
</div>
<div class="card-img">
<img src="https://i.postimg.cc/vBPzD4Gc/photo-1550085997-838afca7d3d4-ixlib-rb-1-2.jpg" alt="">
</div>
<div class="card-title">
<h1>London City</h1>
</div>
<div class="card-body">
<svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
<a href="#" class="btn">Read more</a>
</div>
</div>
<div class="card">
<div class="card-border-2" id="top-border">
<h3>none</h3>
</div>
<div class="card-img">
<img src="https://i.postimg.cc/s2GyThNR/photo-1475463606759-53a070b44126-crop-entropy-cs-tinysrgb-fit-max-fm-jpg-ixid-Mnwx-Mj-A3f-DB8-MXxhb-Gx8f-H.jpg" alt="">
</div>
<div class="card-title">
<h1>Big Ben</h1>
</div>
<div class="card-body">
<svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
<a href="#" class="btn">Read more</a>
</div>
</div>
<div class="card">
<div class="card-border" id="top-border">
<h3>none</h3>
</div>
<div class="card-img">
<img src="https://i.postimg.cc/HWycrJYR/photo-1605146769289-440113cc3d00-ixlib-rb-1-2.jpg" alt="">
</div>
<div class="card-title">
<h1>Buy your first home</h1>
</div>
<div class="card-body">
<svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
<a href="#" class="btn">Read more</a>
</div>
</div>
<div class="card">
<div class="card-border-2" id="top-border">
<h3>none</h3>
</div>
<div class="card-img">
<img src="https://i.postimg.cc/28gZH4Hz/photo-1618498082410-b4aa22193b38-crop-entropy-cs-tinysrgb-fit-max-fm-jpg-ixid-Mnwx-Mj-A3f-DB8-MXxhb-Gx8f-H.jpg" alt="">
</div>
<div class="card-title">
<h1>Here for you</h1>
</div>
<div class="card-body">
<svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
<a href="#" class="btn">Read more</a>
</div>
</div>
<div class="card">
<div class="card-border" id="top-border">
<h3>none</h3>
</div>
<div class="card-img">
<img src="https://i.postimg.cc/9MBdKrDL/photo-1576091160399-112ba8d25d1d-ixlib-rb-1-2.jpg" alt="">
</div>
<div class="card-title">
<h1>Connect with us</h1>
</div>
<div class="card-body">
<svg class="info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque moslestiae eius explicabo mollitia tempore reiciendis, vel, sequi.</p>
<a href="#" class="btn">Read more</a>
</div>
</div>
</div>
</div>CodePudding user response：
The easiest way to do it is just to use 'overflow: hidden' on the parent. It will hide the corners for you, no need to fiddle around with cutting things off. See the example below:
.master {
width: 200px;
border: solid 1px #000;
padding: 5px;
position: relative;
overflow: hidden;
}
.ribbon {
position: absolute;
width: 400px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
background: red;
text-align: center;
top: 42px;
right: -150px;
z-index: 10;
}<div class="master">
<div class="ribbon">
I am a ribbon!
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae tempus nisi. Morbi id orci nec lacus rutrum porta et ornare lectus. Aenean odio turpis, vestibulum varius iaculis eu, faucibus ut mi. Fusce et mauris vehicula, facilisis erat mattis, scelerisque leo. Etiam posuere scelerisque nisi sed suscipit. Nunc eget lacus orci. Vestibulum ultrices eleifend orci, in mollis est molestie non. In fringilla ut nisl sed dapibus. Nulla mattis massa ac volutpat posuere. Pellentesque eu vulputate enim. Ut consequat at orci a ultrices. Maecenas convallis enim et ante rutrum, sit amet tempus augue semper. Pellentesque tortor justo, lacinia id vehicula mattis, consectetur quis sapien. Nunc dapibus vestibulum massa, ac elementum ligula sollicitudin nec. In feugiat nec nisi at porta.
</div>