纯CSS绘图3角形箭头实际效果

日期:2021-01-20 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

应用纯CSS,你只必须非常少的编码便可以创作出各种各样访问器都适配的3角形箭头!

CSS编码


拷贝编码
编码以下:

/* create an arrow that points up */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* left arrow slant */
border-right: 5px solid transparent; /* right arrow slant */
border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
/* create an arrow that points down */
div.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #2f2f2f;
font-size: 0;
line-height: 0;
}
/* create an arrow that points left */
div.arrow-left {
width: 0;
height: 0;
border-bottom: 5px solid transparent; /* left arrow slant */
border-top: 5px solid transparent; /* right arrow slant */
border-right: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
/* create an arrow that points right */
div.arrow-right {
width: 0;
height: 0;
border-bottom: 5px solid transparent; /* left arrow slant */
border-top: 5px solid transparent; /* right arrow slant */
border-left: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}

绘图这些3角形的重要在于,你要让箭头所指方位的两个侧面有很粗的边框。而背向箭头方位的1边也是一样粗的边框,而这条边的色调便是你的3角形的色调。边框越粗,3角形越大。用这类方式你能够绘图出各种各样色调、各种各样尺寸、各种各样房屋朝向的箭头。最妙的是,你只必须几行CSS编码就可以完成这类实际效果。

应用:before和:after绘图CSS3角形

上面的CSS事例应用的是真实的网页页面元素开展绘图,但有时这个真实的元素也有它用,你不可以走上面立即开展实际操作,这是如何办?纯CSS的3角形实际上还能够应用伪元素(pseudo-element)开展绘图。下面便是绘图方式:

拷贝编码
编码以下:

div.tooltip {
/* tooltip content styling in here; nothing to do with arrows */
}
/* shared with before and after */
div.tooltip:before, div.tooltip:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent; /* arrow size */
}
/* these arrows will point up */
/* top-stacked, smaller arrow */
div.tooltip:before {
border-bottom-color: #fff; /* arrow color */</p> <p> /* positioning */
position: absolute;
top: ⑴9px;
left: 255px;
z-index: 2;
}
/* arrow which acts as a background shadow */
div.tooltip:after {
border-bottom-color: #333; /* arrow color */</p> <p> /* positioning */
position: absolute;
top: ⑵4px;
left: 255px;
z-index: 1;
}

背向箭头的那1侧的边框的色调便是3角形箭头的色调。画这个箭头其实不必须另外应用:before和:after两个伪元素——1个就够了。而此外1个,你能够把它用作前1个的情况黑影或情况边。

真应当早点了解这类技术性!我坚信在未来做页面改善时这类简约方便的技术性将派上大主要用途。

上一篇:Less里css表述式的写法示例详细介绍 返回下一篇:没有了