css3切角文本框_CSS3样式linear-gradient的使用（切角效果）

缺角效果

先看效果图

这是内容

.div1 {

width: 100px;

height: 40px;

line-height: 40px;

background:linear-gradient(-135deg, transparent 15px, #162e48 0);

color: #fff;

padding: 5px 15px;

text-align: center;

margin-bottom: 30px;

}

补角效果

先看效果图

这是内容

.div2 {

width: 100px;

height: 40px;

line-height: 40px;

background:linear-gradient(-135deg, #f00 15px, #162e48 0);

color: #fff;

padding: 5px 15px;

text-align: center;

margin-bottom: 30px;

}

只是在栗子1的基础上修改了linear-gradient，将transparent修改为#f00

带边框的效果

先看效果图

这是内容

.div3 {

width: 100px;

height: 40px;

line-height: 40px;

background:linear-gradient(-135deg, #f00 15px, #162e48 0);

color: #fff;

padding: 5px 15px;

text-align: center;

margin-bottom: 30px;

box-shadow: 0 0 1px 1px #fff inset;

}

在栗子2的基础上增加了box-shadow，当然加边框可以有多种方式，可自行选择。

开关效果

效果图

OFF

ON

.div4 {

width: 144px;

height: 30px;

line-height: 30px;

background: #162e48;

color: #FFF;

text-align: center;

margin-bottom: 30px;

}

.div4-1, .div4-2 {

width: 86px;

float: left;

}

.div4-1.active {

margin-right: -28px;

background:linear-gradient(-135deg, transparent 20px, #f00 0);

}

.div4-2.active {

margin-left: -28px;

background:linear-gradient(45deg, transparent 20px, #f00 0);

}

最终效果可根据需要自行调整

在栗子3的基础上做到以下效果，单纯使用linear-gradient没有找到解决方法，如有方案，请在评论下给出方案。以下是其中一种解决方式

效果图

.div5 {

width: 100px;

height: 40px;

line-height: 40px;

background:linear-gradient(-135deg, #fff 15px, #162e48 0);

color: #fff;

padding: 5px 15px;

text-align: center;

box-shadow: 0 0 1px 1px #fff;

margin-bottom: 30px;

position: relative;

}

.div5:after {

content: ' ';

border: solid transparent;

position: absolute;

border-width: 15px;

border-top-color: #000;

border-right-color: #000;

top: -1px;

right: -1px;

}

考虑到兼容性问题，可以通过:before和:after实现同样的效果，给出一个栗子

.div6 {

width: 100px;

height: 40px;

line-height: 40px;

background:#162e48;

color: #fff;

padding: 5px 15px;

text-align: center;

position: relative;

border: 1px solid #fff;

margin-bottom: 30px;

}

.div6:before {

content: ' ';

border: solid transparent;

position: absolute;

border-width: 15px;

border-top-color: #fff;

border-right-color: #fff;

right: 0px;

top: 0px;

}

.div6:after {

content: ' ';

border: solid transparent;

position: absolute;

border-width: 15px;

border-top-color: #000;

border-right-color: #000;

top: -1px;

right: -1px;

}