CSS三角形效果详解

快乐打工仔 分类:实例代码

CSS三角形效果详解属于前端实例代码,有关更多实例代码大家可以查看

本章节介绍一下如何利用css实现三角形效果。

下面就通过代码实例做一下详细说明,先看一个代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
.box{
  margin:20px auto;
  width:0px;
  height:0px;
  border:50px solid transparent;
  border-top-color:#2DCB70;
  border-right-color:gold;
  border-bottom-color:#333333;
  border-left-color:red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

上面的代码中,div元素的宽度和高度都是0,我们所看到的四个不同的颜色是div元素的边框的颜色。

边框通常看起来是矩形,但是如果无限的缩小元素的宽度或者高度,那么就挤压成了三角形,看下面的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
body{text-align:center}
.box{
  margin:20px auto;
  height:0px;
  border:50px solid transparent;
  border-top-color:#2DCB70;
  border-right-color:gold;
  border-bottom-color:#333333;
  border-left-color:red;
}
</style>
<script>
window.onload=function(){
  var obt=document.getElementById("bt");
  var odiv=document.getElementById("antzone");
  var timer=null;
  obt.onclick=function(){
    timer=setInterval(function(){
      if(odiv.offsetWidth==0){
        clearInterval(timer);
      }else{
        odiv.style.width=(parseInt(odiv.style.width)-5)+"px";
      }
    },100)
  }
}
</script>
</head>
<body>
<div id="antzone" class="box" style="width:300px;"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的动态代码是不是看起来更为直观一些。

在实际应用中我们通常只要一个三角,那么只要将其他的三个边框设置为透明即可。代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
body{text-align:center}
.box{
  margin:20px auto;
  height:0px;
  border:50px solid red;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:transparent;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

CSS三角形效果详解,这样的场景在实际项目中还是用的比较多的,关于CSS三角形效果详解就介绍到这了。

回复

我来回复
  • 暂无回复内容