关注前端开发
关注用户体验

CSS3:linear-gradient切角画册

关于linear-gradient的语法就不多做介绍了网上到处都是,下面看个小例

我们先做一个渐变,使其让他旋转,

dome1

<div class="example"> </div>
.example{
height:150px;
width:500px;
margin: 100px auto;
background-color:#4299BC;
background:
-webkit-linear-gradient(45deg, #0E2D57 30px, #A7EAFB 30px),
-webkit-linear-gradient(135deg, #0E2D57 30px, #A7EAFB 30px),
-webkit-linear-gradient(225deg, #0E2D57 30px, #A7EAFB 30px),
-webkit-linear-gradient(315deg, #0E2D57 30px, #A7EAFB 30px);
background-position: bottom left, bottom right, top right, top left;
background-size: 55% 55%;
background-repeat: no-repeat;
}

如果把深色改为透明,那么我们想要的东西就出来了

demo

查看效果

代码下

<div class="tucked-corners-top">
<div class="tucked-corners-bottom"><img src="······"></div>
</div>
.tucked-corners-top {
position: relative;
width: 500px;
min-height: 200px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
background:
-webkit-linear-gradient(45deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(135deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(225deg, transparent 10px, #fff 10px),
-webkit-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-moz-linear-gradient(45deg, transparent 10px, #fff 10px),
-moz-linear-gradient(135deg, transparent 10px, #fff 10px),
-moz-linear-gradient(225deg, transparent 10px, #fff 10px),
-moz-linear-gradient(315deg, transparent 10px, #fff 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #fff 10px),
-o-linear-gradient(135deg, transparent 10px, #fff 10px),
-o-linear-gradient(225deg, transparent 10px, #fff 10px),
-o-linear-gradient(315deg, transparent 10px, #fff 10px);
background-position: bottom left, bottom right, top right, top left;
background-size: 55% 55%;
background-repeat: no-repeat;
-moz-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
}
[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
content: '';
position: absolute;
height: 20px; width: 80px;
-webkit-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
box-shadow: none\9; /* IE9 */
}
.tucked-corners-top::before,
.tucked-corners-top::after {
top: -10px;
}
.tucked-corners-bottom::before,
.tucked-corners-bottom::after {
bottom: -10px;
}
.tucked-corners-top::before,
.tucked-corners-bottom::before {
left: -42px;
}
.tucked-corners-top::after,
.tucked-corners-bottom::after {
right: -42px;
}
.tucked-corners-top::before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tucked-corners-top::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.tucked-corners-bottom::before {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.tucked-corners-bottom::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

查看效果

ps:IE好像还没有完全支持,所以我就没有写IE兼容

未经允许不得转载:大前端 » CSS3:linear-gradient切角画册
分享到:更多 ()

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #4

    多谢站长分享!

    影音2年前 (2015-10-09)回复
  2. #3

    学习了。。。。

    QQ申诉博客2年前 (2015-10-05)回复
  3. #2

    涨姿势了!

    明天更好2年前 (2015-09-28)回复
  4. #1

    不错,不错,多谢站长分享!

    星族VIP论坛2年前 (2015-09-22)回复

themebetter 国内更好的WordPress主题服务商

立即前往