用border属性来画三角形

最新推荐文章于 2022-07-30 16:08:52 发布

夜跑者

最新推荐文章于 2022-07-30 16:08:52 发布

阅读量264

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/liubangbo/article/details/103335252

版权

CSS 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

在微信公众号上看到一篇用border属性来画三角形的文章，今天来试验一下，果然好使。需求：画一个等腰三角形，底边长200，腰长100。

我们一步一步来实现此需求。

1）实现一个200宽度的正方形，使其水平垂直居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
  html,body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
  }
  .triggleStyle{
	width: 200px;
	height: 200px;	
	margin: 0 auto;
	position: relative;
	top: 50%;
	margin-top: -100px;	
	background-color: green
  }
  </style>
  <body>
    
	<div class="triggleStyle"></div>
    
    
    <script>
     
	 
    </script>
  </body>
</html>

上面的代码就实现了一个正方形水平垂直居中。我们给这个正方形加上边框试试效果

2）给正方形加边框

我们去掉了正方形的背景色，并给正方形加了100px的边框：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
  html,body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
  }
  .triggleStyle{
	width: 200px;
	height: 200px;	
	margin: 0 auto;
	position: relative;
	top: 50%;
	margin-top: -100px;	
	border: 100px solid;
	border-color: red green gray yellow
  }
  </style>
  <body>
    
	<div class="triggleStyle"></div>
    
    
    <script>
     
	 
    </script>
  </body>
</html>

效果如下：

如果我们设置边框的大小为200px，div的长度和宽度为0，看下效果：

看到了我们想要的三角形了。

3）再把另外三个三角形隐藏了就OK了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
  html,body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
  }
  .triggleStyle{
	width: 0px;
	height: 0px;	
	margin: 0 auto;
	position: relative;
	top: 50%;
	margin-top: -100px;	
	border: 200px solid;
	border-color: transparent transparent gray transparent
  }
  </style>
  <body>
    
	<div class="triggleStyle"></div>
    
    
    <script>
     
	 
    </script>
  </body>
</html>

最后我们给border-color属性另外三条边设置为transparent 就实现了隐藏另外三条边的目的。效果如下：

夜跑者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用border属性来画三角形

在微信公众号上看到一篇用border属性来画三角形的文章，今天来试验一下，果然好使。需求：画一个等腰三角形，底边长200，腰长100。我们一步一步来实现此需求。1）实现一个200宽度的正方形，使其水平垂直居中<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"...
复制链接

扫一扫