巧用边框设置一些效果
发布时间：2017-06-21, 15:32:03 分类：HTML | 编辑 off 网址 | 辅助
图集1/25
正文 14014字数 774,939阅读
我们在做css的时候为了提高网站的效率减少服务器请求，我们可以通过css来实现一些简单的图片特效，比如说三角形，这篇文章讲解的是通过边框实现不同的效果。首先看一下不同边框样式的效果：
<style type="text/css">
.style-border b {
border-width:100px;
border-color:orange blue yellow red;
width:0px;
height:0;
vertical-align:middle;
display:inline-block;
margin:10px;
}
.style-border .style-10 {
width:110px;
height:100px;
border-width:50px 40px;
font-size:15px;
line-height:30px;
}
.style-border .solid {
border-style:solid;
}
.style-border .dotted {
border-style:dotted;
}
.style-border .dashed {
border-style:dashed;
}
.style-border .double {
border-style:double;
}
.style-border .groove {
border-style:groove;
}
.style-border .ridge {
border-style:ridge;
}
.style-border .inset {
border-style:inset;
}
.style-border .outset {
border-style:outset;
}
</style>
<div class="style-border">
<b class="solid style-10">实线：solid</b>
<b class="solid"></b>
<b class="dotted style-10">点线：dotted</b>
<b class="dotted"></b>
<b class="dashed style-10">虚线：dashed</b>
<b class="dashed"></b>
<b class="double style-10">双线：double</b>
<b class="double"></b>
<b class="groove style-10">3D凹槽：groove</b>
<b class="groove"></b>
<b class="ridge style-10">3D凸槽：ridge</b>
<b class="ridge"></b>
<b class="inset style-10">3D凹边：inset</b>
<b class="inset"></b>
<b class="outset style-10">3D凸边：outset</b>
<b class="outset"></b>
</div>Run code
Cut to clipboard
单个边框可实现的效果：
<style type="text/css">
.one-border b {
border-width:100px;
border-color:orange blue yellow red;
width:0px;
height:0;
vertical-align:middle;
display:inline-block;
margin:10px;
}
.one-border .b-1 {
border-width:20px 20px 0;
border-color:orange transparent transparent;
border-style:solid dashed dashed;
}
.one-border .b-2 {
border-width:20px 20px 20px 0;
border-color:transparent orange transparent transparent;
border-style:dashed solid dashed dashed;
}
.one-border .b-3 {
border-width:0 20px 20px 20px;
border-color:transparent transparent orange;
border-style:dashed dashed solid;
}
.one-border .b-4 {
border-width:20px 0 20px 20px;
border-color:transparent transparent transparent orange;
border-style:dashed dashed dashed solid;
}
.one-border .b-5 {
border-width:5px 30px 50px 30px;
border-color:#efefef #ccc #ddd orange;
border-style:solid;
}
.one-border .b-6 {
border-width:44px 22px 15px;
border-color:#ccc #eee #aaa orange;
border-style:solid;
}
.one-border .b-7 {
border-width:0 0px 55px 55px;
border-color:#ccc #eee #aaa orange;
border-style:solid;
}
.one-border .b-8 {
border-width:55px 0px 0px 55px;
border-color:#ccc #eee #aaa orange;
border-style:solid;
}
.one-border .b-9 {
border-width:20px 0 50px 23px;
border-color:#ccc #eee #aaa orange;
border-style:solid;
}
.one-border .b-10 {
border-width:23px 5px 0 50px;
border-color:orange #ccc #eee #aaa;
border-style:solid;
}
.one-border .b-11 {
border-width:15px 44px 0 22px;
border-color:orange #ccc #eee #aaa;
border-style:solid;
}
.one-border .b-12 {
border-width:55px 55px 0 0px;
border-color:orange #ccc #eee #aaa;
border-style:solid;
}
.one-border .b-13 {
border-width:55px 0px 0 55px;
border-color:orange #ccc #eee #aaa;
border-style:solid;
}
.one-border .b-14 {
border-width:55px 55px 0 0px;
border-color:#ccc orange #eee #aaa;
border-style:solid;
}
.one-border .b-15 {
height:45px;
border-width:5px 3px;
border-color:transparent orange transparent transparent;
border-style:solid;
}
.one-border .b-16 {
height:45px;
border-width:5px 3px;
border-color:transparent transparent transparent orange;
border-style:solid;
}
</style>
<div class="one-border">
<b class="b-1"></b>
<b class="b-2"></b>
<b class="b-3"></b>
<b class="b-4"></b>
<b class="b-5"></b>
<b class="b-6"></b>
<b class="b-7"></b>
<b class="b-8"></b>
<b class="b-9"></b>
<b class="b-10"></b>
<b class="b-11"></b>
<b class="b-12"></b>
<b class="b-13"></b>
<b class="b-14"></b>
<b class="b-15"></b>
<b class="b-16"></b>
</div>Run code
Cut to clipboard
两个边框可实现的效果：
<style type="text/css">
.two-border b {
border-width:100px;
border-color:orange blue yellow red;
width:0px;
height:0;
vertical-align:middle;
display:inline-block;
margin:10px;
}
.two-border .b-1 {
border-width:20px;
border-color:orange orange transparent transparent;
border-style:solid solid dashed dashed;
}
.two-border .b-2 {
border-width:20px;
border-color:transparent orange orange transparent;
border-style:dashed solid solid dashed;
}
.two-border .b-3 {
border-width:20px;
border-color:transparent transparent orange orange;
border-style:dashed dashed solid solid;
}
.two-border .b-4 {
border-width:20px;
border-color:orange transparent transparent orange;
border-style:solid dashed dashed solid;
}
.two-border .b-5 {
border-width:20px;
border-color:orange transparent orange transparent;
border-style:solid dashed solid dashed;
}
.two-border .b-6 {
border-width:20px;
border-color:transparent orange transparent orange;
border-style:dashed solid dashed solid;
}
.two-border .b-7 {
border-width:38px 45px 7px 21px;
border-color:orange orange transparent transparent;
border-style:dashed solid dashed solid;
}
.two-border .b-8 {
border-width:38px 45px 7px 21px;
border-color:orange transparent transparent orange;
border-style:dashed solid dashed solid;
}
.two-border .b-9 {
border-width:20px;
border-color:orange;
border-style:double outset;
}
.two-border .b-10 {
border-width:20px;
border-color:orange orange transparent transparent;
border-style:groove ridge inset dashed;
}
</style>
<div class="two-border">
<b class="b-1"></b>
<b class="b-2"></b>
<b class="b-3"></b>
<b class="b-4"></b>
<b class="b-5"></b>
<b class="b-6"></b>
<b class="b-7"></b>
<b class="b-8"></b>
<b class="b-9"></b>
<b class="b-10"></b>
</div>Run code
Cut to clipboard
三个边框可实现的效果：
<style type="text/css">
.three-border b {
border-width:100px;
border-color:orange blue yellow red;
width:0px;
height:0;
vertical-align:middle;
display:inline-block;
margin:10px;
}
.three-border .b-1 {
border-width: 20px;
border-color: orange;
border-style: double outset;
}
.three-border .b-2 {
border-width: 20px;
border-color: orange orange orange transparent;
border-style: groove ridge inset dashed;
}
.three-border .b-3 {
border-width: 20px;
border-color: orange transparent orange orange;
border-style: solid dashed solid solid;
}
.three-border .b-4 {
border-width: 20px;
border-color: orange orange transparent orange;
border-style: solid solid dashed solid;
}
.three-border .b-5 {
border-width: 20px;
border-color: orange orange orange transparent;
border-style: solid solid solid dashed;
}
.three-border .b-6 {
border-width: 20px;
border-color: transparent orange orange orange;
border-style: dashed solid solid solid;
}
</style>
<div class="three-border">
<b class="b-1"></b>
<b class="b-2"></b>
<b class="b-3"></b>
<b class="b-4"></b>
<b class="b-5"></b>
<b class="b-6"></b>
</div>Run code
Cut to clipboard
边框实现效果案例：
<style type="text/css">
.showCase {
padding:20px;
}
.showCase:after,
.showCase:before {
display: table;
content: "";
clear:both;
}
.showCase div {
position:relative;
}
.showCase div b {
position:absolute;
font-size:0px;
line-height:0px;
margin:0;
}
.case-1 {
border:5px solid orange;
width:500px;
height:150px;
}
.case-1 b {
left:50px;
border-style:dashed dashed solid;
}
.case-1 b.b-1 {
border-width:0px 20px 15px;
border-color:transparent transparent orange;
top:-15px;
}
.case-1 b.b-2 {
border-width:0px 20px 15px;
border-color:transparent transparent white;
top:-10px;
}
.case-2 {
background-color:orange;
width:500px;
height:150px;
float:left;
margin-right:30px;
}
.case-2 b {
left:50px;
border-style:solid dashed dashed;
}
.case-2 b.b-1 {
border-width:15px 20px 0px;
border-color:orange transparent transparent;
bottom:-14px;
}
.case-2-1 {
width:300px;
height:130px;
margin-left:0px;
background-color:orange;
float:left;
}
.case-2-1 b.b-1 {
border-width:20px 10px 0 60px;
border-color:orange transparent;
border-style:solid dashed;
bottom:-20px;
left:60px;
}
.case-3 {
border:5px solid orange;
width:250px;
height:100px;
margin-left:50px;
}
.case-3 b {
top:15px;
border-style:dashed solid dashed solid;
border-width:20px 15px 20px 0px;
}
.case-3 b.b-1 {
border-color:transparent orange transparent orange;
left:-15px;
}
.case-3 b.b-2 {
border-color:transparent white transparent transparent;
left:-10px;
}
.case-4 {
border:5px solid orange;
width:250px;
height:100px;
margin-left:50px;
background-color:orange;
}
.case-4 b {
top:15px;
border-style:dashed solid dashed solid;
border-width:20px 0px 20px 15px;
}
.case-4 b.b-1 {
border-color:transparent orange transparent orange;
right:-15px;
}
.case-4 b.b-2 {
border-color:transparent white transparent white;
right:-10px;
display:none;
}
.case-5 {
border:5px solid orange;
width:200px;
height:80px;
margin:10px 0 10px 50px;
background-color:orange;
float:left;
}
.case-5 b.b-1 {
top:5px;
border-color:orange orange transparent transparent;
border-style:solid solid dashed dashed;
border-width:20px;
left:-40px;
}
.case-5 b.b-2 {
top:0px;
border-color:#fff #fff transparent transparent;
border-style:solid solid dashed dashed;
border-width:10px 20px 10px 28px;
left:-53px;
}
.case-5-1 {
width:200px;
height:80px;
margin-left:10px;
background-color:orange;
padding:5px;
margin:10px 0px 10px 50px;
float:left;
}
.case-5-1 b.b-1 {
top:15px;
border-color:transparent orange;
border-style:solid solid dashed;
border-width:0px 0px 40px 40px;
right:-40px;
}
.case-5-1 b.b-2 {
top:15px;
border-color:transparent #fff;
border-style:solid solid dashed;
border-width:0px 0px 15px 40px;
right:-40px;
}
.case-6 {
background-color:orange;
width:150px;
height:30px;
}
.case-6 b.b-1 {
border-width:15px 25px;
border-style:solid dashed solid solid;
border-color:orange transparent orange orange;
right:-28px;
top:0px;
}
.case-6 b.b-2 {
border-width:2px 2px 2px 0px;
border-style:dashed solid dashed dashed;
border-color:transparent orange transparent transparent;
left:-2px;
top:0px;
height:26px;
}
.case-7 {
background-color:orange;
width:150px;
height:30px;
margin-left:30px;
}
.case-7 b {
height:26px;
top:0px;
}
.case-7 b.b-1 {
border-color:transparent orange transparent transparent;
border-width:2px 2px 2px 0px;
border-style:dashed solid dashed solid;
left:-2px;
}
.case-7 b.b-2 {
border-color:transparent transparent transparent orange;
border-width:2px 0px 2px 2px;
border-style:dashed solid dashed solid;
right:-2px;
}
</style>
<div class="showCase">
<div class="case-1"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
<div class="case-2"><b class="b-1"></b></div>
<div class="case-2-1"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
<div class="case-3"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
<div class="case-4"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
<div class="case-5"><b class="b-1"></b><b class="b-2"></b></div>
<div class="case-5-1"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
<div class="case-6"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
<div class="case-7"><b class="b-1"></b><b class="b-2"></b></div>
</div>Run code
Cut to clipboard
（支付宝）给作者钱财以资鼓励 （微信）→
有过 5 条评论 »
设置父元素opacity：0.5，子元素没有设置opacity，子元素会受到父元素的影响，也会有0.5的透明度。
即使设置子元素opacity为1，也是在父元素的opacity为0.5的基础上设置为1的，那么子元素的opacity还是0.5。
解决方法：为父元素设置background: rgba(0,0,0,0.5)，不会影响子元素的显示。
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。
圆形
要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID。
圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：
<div id="circle"></div> <style> #circle { width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; }</style>椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作。 设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变： <div id="oval"></div> <style> #oval { width: 200px; height: 100px; background: #e9337c; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px; }</style>要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。
<div id="triangle"></div> <style>#triangle { width: 0; height: 0; border-bottom: 140px solid #fcf921; border-left: 70px solid transparent; border-right: 70px solid transparent; }</style>与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：
<div id="triangle"></div> <style>#triangle { width: 0; height: 0; border-top: 140px solid #20a3bf; border-left: 70px solid transparent; border-right: 70px solid transparent; }</style>左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。
<div id="triangle_left"></div> <style>#triangle_left { width: 0; height: 0; border-top: 70px solid transparent; border-right: 140px solid #6bbf20; border-bottom: 70px solid transparent; } </style>右三角形
右三角形操作的是border-bottom、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。
<div id="triangle_right"></div> <style>#triangle_right { width: 0; height: 0; border-top: 70px solid transparent; border-left: 140px solid #ff5a00; border-bottom: 70px solid transparent; }</style>菱形
制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。
<div id="diamond"></div> <style>#diamond { width: 120px; height: 120px; background: #1eff00; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; margin: 60px 0 10px 310px; } </style>梯形
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。
<div id="trapezium"></div> <style>#trapezium { height: 0; width: 120px; border-bottom: 120px solid #ec3504; border-left: 60px solid transparent; border-right: 60px solid transparent; }</style>平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。
<div id="parallelogram"></div> <style>#parallelogram { width: 160px; height: 100px; background: #8734f7; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); transform: skew(30deg); }</style>星形
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。
<div id="star"></div> <style>#star { width: 0; height: 0; margin: 50px 0; color: #fc2e5a; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star:before { height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #star:after { content: ''; width: 0; height: 0; position: absolute; display: block; top: 3px; left: -105px; color: #fc2e5a; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); }</style>六角星形
CSS六角星形
和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。
<div id="star_six_points"></div> <style>#star_six_points { width: 0; height: 0; display: block; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #de34f7; margin: 10px auto; } #star_six_points:after { content: ""; width: 0; height: 0; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #de34f7; margin: 30px 0 0 -50px; } </style>五边形
CSS五边形
创建CSS五边形需要结合两个图形：一个梯形，然后在它的上面放一个三角形，共同组成一个五边形。
<div id="pentagon"></div> <style>#pentagon { width: 54px; position: relative; border-width: 50px 18px 0; border-style: solid; border-color: #277bab transparent; } #pentagon:before { content: ""; height: 0; width: 0; position: absolute; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent #277bab; } </style>六边形
六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。
<div id="hexagon"></div> <style>#hexagon { width: 100px; height: 55px; background: #fc5e5e; position: relative; margin: 10px auto; } #hexagon:before { content: ""; width: 0; height: 0; position: absolute; top: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #fc5e5e; } #hexagon:after { content: ""; width: 0; height: 0; position: absolute; bottom: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #fc5e5e; }</style>CSS八角形
八角形的制作方法也有多种方式，这里使用的是先制作两个相同的梯形，然后在两边分别放置一个三角形。
<div id="octagon"></div> <style>#octagon { width: 100px; height: 100px; background: #ac60ec; position: relative; } #octagon:before { content: ""; width: 42px; height: 0; position: absolute; top: 0; left: 0; border-bottom: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4; } #octagon:after { content: ""; width: 42px; height: 0; position: absolute; bottom: 0; left: 0; border-top: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4; } </style>CSS心形
心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。
<div id="heart"></div> <style>#heart { position: relative; } #heart:before,#heart:after { content: ""; width: 70px; height: 115px; position: absolute; background: red; left: 70px; top: 0; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } </style>蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。
<div id="egg"></div> <style>#egg { width: 136px; height: 190px; background: #ffc000; display: block; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } </style>CSS无穷符号
无穷符号可以通过border属性和设置伪元素的角度来实现。
<div id="infinity"></div> <style>#infinity { width: 220px; height: 100px; position: relative; } #infinity:before,#infinity:after { content: ""; width: 60px; height: 60px; position: absolute; top: 0; left: 0; border: 20px solid #06c999; -moz-border-radius: 50px 50px 0; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }</style>消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。
<div id="comment_bubble"></div> <style>#comment_bubble { width: 140px; height: 100px; background: #088cb7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } #comment_bubble:before { content: ""; width: 0; height: 0; right: 100%; top: 38px; position: absolute; border-top: 13px solid transparent; border-right: 26px solid #088cb7; border-bottom: 13px solid transparent; } </style>吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形。
<div id="pacman"></div> <style>#pacman { width: 0; height: 0; border-right: 70px solid transparent; border-top: 70px solid #ffde00; border-left: 70px solid #ffde00; border-bottom: 70px solid #ffde00; border-top-left-radius: 70px; border-top-right-radius: 70px; border-bottom-left-radius: 70px; border-bottom-right-radius: 70px; }</style>border: 0; background: transparent;去掉小三角：
appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari 和 Chrome */<script type="text/javascript"> function isIE() { if (!!window.ActiveXObject || "ActiveXObject" in window || navigator.userAgent.indexOf("Edge")>-1){ return true; } else{ return false; } } if(isIE()) { alert("不支持IE，谢谢！") window.open('www.lizhenhu.com'); } </script> <style type="text/css"> .page-wrap,.page-inner{ margin: 0 auto; width: 600px; padding: 50px 0 0 60px; background: #fff; border-radius: 0 20px 0 0; text-align: justify; } .page-inner{ padding: 0 60px 40px 0; } .page-wrap{ position: relative; margin-left: 0; filter: drop-shadow(0px 0px 25px #aaa); } .page-wrap:before{ content: ''; display: block; position: absolute; right: -60px; top: 0; width: 60px; height: 50px; background: linear-gradient(42deg, #ddd 30%, rgba(0,0,0,0) 40%) } </style> <div class="page-wrap"> <div class="page-inner"> </div> </div>