html css右下角三角形,css纯三角形.html

Title

/*向上*/

.triangle_border_up{

width:0;

height:0;

border-width:0 30px 30px;

border-style:solid;

border-color:transparent transparent #333;/*透明 透明 灰*/

margin:40px auto;

position:relative;

}

.triangle_border_up span{

display:block;

width:0;

height:0;

border-width:0 28px 28px;

border-style:solid;

border-color:transparent transparent #fc0;/*透明 透明 黄*/

position:absolute;

top:1px;

left:-28px;

}

/*向下*/

.triangle_border_down{

width:0;

height:0;

border-width:30px 30px 0;

border-style:solid;

border-color:#333 transparent transparent;/*灰 透明 透明 */

margin:40px auto;

position:relative;

}

.triangle_border_down span{

display:block;

width:0;

height:0;

border-width:28px 28px 0;

border-style:solid;

border-color:#fc0 transparent transparent;/*黄 透明 透明 */

position:absolute;

top:-29px;

left:-28px;

}

/*向左*/

.triangle_border_left{

width:0;

height:0;

border-width:30px 30px 30px 0;

border-style:solid;

border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */

margin:40px auto;

position:relative;

}

.triangle_border_left span{

display:block;

width:0;

height:0;

border-width:28px 28px 28px 0;

border-style:solid;

border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */

position:absolute;

top:-28px;

left:1px;

}

/*向右*/

.triangle_border_right{

width:0;

height:0;

border-width:30px 0 30px 30px;

border-style:solid;

border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/

margin:40px auto;

position:relative;

}

.triangle_border_right span {

display: block;

width: 0;

height: 0;

border-width: 28px 0 28px 28px;

border-style: solid;

border-color: transparent transparent transparent #fc0; /*透明 透明 透明 黄*/

position: absolute;

top: -28px;

left: -29px;

}

var xy = getXY('.triangle_border_up');

console.log(xy);

function getXY(dom) {

var x = $(dom).offset().top;

var y = $(dom).offset().left;

return [x,y];

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史