css3单张图片切角固定

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<div class="tucked-corners-top">

    <div class="tucked-corners-bottom"><img src="images/ziyouke.jpg"></div>

</div>

4、书写css代码。

<style>

.tucked-corners-top * { padding: 0; margin: 0; font-family: "Microsoft YaHei"; box-sizing: border-box; -webkit-box-sizing: border-box; }

.tucked-corners-top img { max-width: 100%; }

.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; }

.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); }

</style>

5、代码整体结构。

6、查看效果。