[代码]CSS3便签切角效果

2015-05-22 19:22:28 -0700

CSS3 便签切角效果

代码如下

<div class="tucked-corners-top">
  <div class="tucked-corners-bottom">
    CSS3 便签切角效果
  </div>
</div>

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

«Newer Older»

Subscribe | Register | Login | N