用CSS实现不同角度的三角形
第一部分：效果图预览
第二部分：如何实现的？
html文件：
less匹配实现不同角度的三角形
用CSS的匹配实现不同角度的三角形-不带边框
上三角:
下三角:
左三角:
右三角:
左上三角:
右下三角:
右上三角:
左下三角：
用CSS的匹配实现不同角度的三角形-带边框
上三角:
下三角:
左三角:
右三角:
左上三角:
右下三角:
右上三角:
左下三角：
CSS文件：
@charset "utf-8";
div,
h3 {
margin: 0px;
padding: 0px;
}
h3 {
width: 100px;
height: 40px;
line-height: 18px;
float: left;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
height: 0px;
content: "";
display: block;
clear: both;
}
/*不带边框*/
/*上三角*/
/*下三角*/
/*左三角*/
/*右三角*/
/*左上三角*/
/*第1种
/*.triangle ( left-top, @w:5px, @c:#ff0000) {
border-width: @w @w 0px 0px;
border-color: @c transparent transparent transparent ;
border-style: solid dashed dashed solid ;
}*/
/*第2种*/
/*右下三角*/
/*第1种*/
/*.triangle ( right-bottom, @w:5px, @c:#ff0000) {
border-width: @w @w 0px 0px;
border-color:transparent @c transparent transparent ;
border-style:solid ;
}*/
/*第2种*/
/*左下三角*/
/*第1种*/
/*.triangle ( left-bottom, @w:5px, @c:#ff0000) {
border-width: 0px @w @w 0px ;
border-color: transparent transparent @c transparent ;
border-style: solid;
}*/
/*第2种*/
/*右上三角*/
/*第1种*/
/*.triangle ( right-top, @w:5px, @c:#ff0000) {
border-width: @w 0px 0px @w;
border-color: @c transparent transparent transparent ;
border-style: solid ;
}*/
/*第2种*/
.triangle-content {
width: 60px;
height: 40px;
display: block ;
float: left;
position: relative;
}
/*不带边框*/
.triangle-top {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 10px 10px;
border-color: transparent transparent #ff0000 transparent;
border-style: dashed dashed solid dashed ;
}
.triangle-bottom {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 10px 10px 0px;
border-color: #ff0000 transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle-left {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 10px 10px 10px 0px;
border-color: transparent #ff0000 transparent transparent;
border-style: dashed solid dashed dashed ;
}
.triangle-right {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 10px 0px 10px 10px;
border-color: transparent transparent transparent #ff0000;
border-style: dashed dashed dashed solid ;
}
.triangle-left-top {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 0px 10px 10px;
border-color: transparent transparent transparent #ff0000;
border-style: solid ;
}
.triangle-right-bottom {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 0px 10px 10px;
border-color: transparent transparent #ff0000 transparent;
border-style: solid ;
}
.triangle-right-top {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 10px 10px 0px;
border-color: transparent #ff0000 transparent transparent;
border-style: solid ;
}
.triangle-left-bottom {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 10px 0px 0px 10px;
border-color: transparent transparent transparent #ff0000;
border-style: solid ;
}
/*带边框*/
.triangle-top-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 10px 10px;
border-color: transparent transparent #ff0000 transparent;
border-style: dashed dashed solid dashed ;
}
.triangle-top1-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 8px 8px;
border-color: transparent transparent #ccff44 transparent;
border-style: dashed dashed solid dashed ;
top: 1px;
z-index: 34;
position: absolute;
left: 2px;
}
.triangle-bottom-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 10px 10px 0px;
border-color: #ff0000 transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle-bottom1-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 8px 8px 0px;
border-color: #ccff44 transparent transparent transparent;
border-style: solid dashed dashed dashed;
top: 1px;
z-index: 34;
position: absolute;
left: 2px;
}
.triangle-left-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 10px 10px 10px 0px;
border-color: transparent #ff0000 transparent transparent;
border-style: dashed solid dashed dashed ;
}
.triangle-left1-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 8px 8px 8px 0px;
border-color: transparent #ccff44 transparent transparent;
border-style: dashed solid dashed dashed ;
top: 2px;
z-index: 34;
position: absolute;
left: 1px;
}
.triangle-right-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 10px 0px 10px 10px;
border-color: transparent transparent transparent #ff0000;
border-style: dashed dashed dashed solid ;
}
.triangle-right1-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 8px 0px 8px 8px;
border-color: transparent transparent transparent #ccff44;
border-style: dashed dashed dashed solid ;
top: 2px;
z-index: 34;
position: absolute;
left: 1px;
}
.triangle-left-top-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 0px 10px 10px;
border-color: transparent transparent transparent #ff0000;
border-style: solid ;
}
.triangle-left-top1-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 0px 8px 8px;
border-color: transparent transparent transparent #ccff44;
border-style: solid ;
top: 1px;
z-index: 34;
position: absolute;
left: 1px;
}
.triangle-right-bottom-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 0px 11px 11px;
border-color: transparent transparent #ff0000 transparent;
border-style: solid ;
}
.triangle-right-bottom1-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 0px 8px 8px;
border-color: transparent transparent #ccff44 transparent;
border-style: solid ;
top: 2px;
z-index: 34;
position: absolute;
left: 2px;
}
.triangle-right-top-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 11px 11px 0px;
border-color: transparent #ff0000 transparent transparent;
border-style: solid ;
}
.triangle-right-top1-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 0px 8px 8px 0px;
border-color: transparent #ccff44 transparent transparent;
border-style: solid ;
top: 1px;
z-index: 34;
position: absolute;
left: 2px;
}
.triangle-left-bottom-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 11px 0px 0px 11px;
border-color: transparent transparent transparent #ff0000;
border-style: solid ;
}
.triangle-left-bottom1-border {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 8px 0px 0px 8px;
border-color: transparent transparent transparent #ccff44;
border-style: solid ;
top: 2px;
z-index: 34;
position: absolute;
left: 1px;
}
LESS文件：
@charset"utf-8";
div,h3{
margin:0px;
padding:0px;
}
.fl () { float: left; }
h3 {
width: 100px;
height: 40px;
line-height:18px;
.fl () ;
}
.clearfix{
&:after {
height:0px;
content:"";
display:block;
clear:both;
}
zoom:1;
};
.triangle ( @_, @w:10px, @c:#ff0000 ) {
width: 0px;
height: 0px;
overflow: hidden;
}
/*不带边框*/
/*上三角*/
.triangle ( top, @w:10px, @c:#ff0000 ) {
border-width:0px @w @w;
border-color:transparent transparent @c transparent ;
border-style:dashed dashed solid dashed ;
}
/*下三角*/
.triangle ( bottom, @w:10px, @c:#ff0000) {
border-width: @w @w 0px ;
border-color: @c transparent transparent transparent ;
border-style: solid dashed dashed dashed;
}
/*左三角*/
.triangle ( left, @w:10px, @c:#ff0000) {
border-width: @w @w @w 0px;
border-color: transparent @c transparent transparent ;
border-style: dashed solid dashed dashed ;
}
/*右三角*/
.triangle ( right, @w:10px, @c:#ff0000) {
border-width: @w 0px @w @w;
border-color: transparent transparent transparent @c ;
border-style: dashed dashed dashed solid ;
}
/*左上三角*/
/*第1种
/*.triangle ( left-top, @w:5px, @c:#ff0000) {
border-width: @w @w 0px 0px;
border-color: @c transparent transparent transparent ;
border-style: solid dashed dashed solid ;
}*/
/*第2种*/
.triangle ( left-top, @w:5px, @c:#ff0000) {
border-width: 0px 0px @w @w;
border-color: transparent transparent transparent @c ;
border-style: solid ;
}
/*右下三角*/
/*第1种*/
/*.triangle ( right-bottom, @w:5px, @c:#ff0000) {
border-width: @w @w 0px 0px;
border-color:transparent @c transparent transparent ;
border-style:solid ;
}*/
/*第2种*/
.triangle ( right-bottom, @w:5px, @c:#ff0000) {
border-width: 0px 0px @w @w ;
border-color: transparent transparent @c transparent ;
border-style: solid ;
}
/*左下三角*/
/*第1种*/
/*.triangle ( left-bottom, @w:5px, @c:#ff0000) {
border-width: 0px @w @w 0px ;
border-color: transparent transparent @c transparent ;
border-style: solid;
}*/
/*第2种*/
.triangle ( left-bottom, @w:5px, @c:#ff0000) {
border-width: @w 0px 0px @w;
border-color: transparent transparent transparent @c ;
border-style: solid ;
}
/*右上三角*/
/*第1种*/
/*.triangle ( right-top, @w:5px, @c:#ff0000) {
border-width: @w 0px 0px @w;
border-color: @c transparent transparent transparent ;
border-style: solid ;
}*/
/*第2种*/
.triangle ( right-top, @w:5px, @c:#ff0000) {
border-width:0px @w @w 0px ;
border-color: transparent @c transparent transparent;
border-style: solid ;
}
.triangle-content {
width: 60px;
height: 40px;
display: block ;
.fl();
position: relative;
}
/*不带边框*/
.triangle-top{
.triangle( top, @w:10px, @c:#ff0000 );
}
.triangle-bottom{
.triangle( bottom, @w:10px, @c:#ff0000 );
}
.triangle-left{
.triangle( left, @w:10px, @c:#ff0000 );
}
.triangle-right{
.triangle( right, @w:10px, @c:#ff0000 );
}
.triangle-left-top{
.triangle( left-top, @w:10px, @c:#ff0000 );
}
.triangle-right-bottom{
.triangle( right-bottom, @w:10px, @c:#ff0000 );
}
.triangle-right-top{
.triangle( right-top, @w:10px, @c:#ff0000 );
}
.triangle-left-bottom{
.triangle( left-bottom, @w:10px, @c:#ff0000 );
}
/*带边框*/
.triangle-top-border{
.triangle( top, @w:10px, @c:#ff0000 );
}
.triangle-top1-border {
.triangle( top, @w:8px, @c:#ccff44 );
top: 1px;
z-index: 34;
position: absolute;
left: 2px
}
.triangle-bottom-border{
.triangle( bottom, @w:10px, @c:#ff0000 );
}
.triangle-bottom1-border{
.triangle( bottom, @w:8px, @c:#ccff44 );
top: 1px;
z-index: 34;
position: absolute;
left: 2px
}
.triangle-left-border{
.triangle( left, @w:10px, @c:#ff0000 );
}
.triangle-left1-border{
.triangle( left, @w:8px, @c:#ccff44 );
top: 2px;
z-index: 34;
position: absolute;
left: 1px
}
.triangle-right-border{
.triangle( right, @w:10px, @c:#ff0000 );
}
.triangle-right1-border{
.triangle( right, @w:8px, @c:#ccff44 );
top: 2px;
z-index: 34;
position: absolute;
left: 1px
}
.triangle-left-top-border{
.triangle( left-top, @w:10px, @c:#ff0000 );
}
.triangle-left-top1-border{
.triangle( left-top, @w:8px, @c:#ccff44 );
top: 1px;
z-index: 34;
position: absolute;
left: 1px
}
.triangle-right-bottom-border{
.triangle( right-bottom, @w:11px, @c:#ff0000 );
}
.triangle-right-bottom1-border{
.triangle( right-bottom, @w:8px, @c:#ccff44 );
top: 2px;
z-index: 34;
position: absolute;
left: 2px
}
.triangle-right-top-border{
.triangle( right-top, @w:11px, @c:#ff0000 );
}
.triangle-right-top1-border{
.triangle( right-top, @w:8px, @c:#ccff44 );
top: 1px;
z-index: 34;
position: absolute;
left: 2px
}
.triangle-left-bottom-border{
.triangle( left-bottom, @w:11px, @c:#ff0000 );
}
.triangle-left-bottom1-border{
.triangle( left-bottom, @w:8px, @c:#ccff44 );
top: 2px;
z-index: 34;
position: absolute;
left: 1px
}