CSS

Css3如何:before :after 写小三角形

主要介绍了详解Css3如何利用 :before :after 写小三角形,在开发过程当中还是会实际用到的,分享给大家做个参考。

u=3117196604,665035782&fm=26&gp=0.jpg

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#demo {
  margin: 100px;;
  width: 100px;
  height: 100px;
  background-color: #fff;
  position: relative;
  border: 2px solid #333;
} /*方框的样式*/
 
#demo:after, #demo:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 100%;    /*根据三角形的位置,可以随意更改。*/
  position: absolute;
  width: 0;
} 
 
#demo:after {
  border-width: 10px;
  border-left-color: #fff;
  top: 20px;/*根据三角的位置改变*/
  margin-left: -1px;
}/*这是一个白色的三角*/
 
#demo:before {
   border-width: 12px;
   border-left-color: #000;
   top: 18px;
}/*这是一个黑色的三角*/
</style>
<body>
<div id="demo"></div>
</body>
</html>

1587005620646435.jpg

朗读
版权属于:

IT帝国

本文链接:

https://www.itdiguo.cn/archives/198.html(转载时请注明本文出处及文章链接)

评论 (0)

标签云