css写小三角形

最新推荐文章于 2025-05-14 17:03:41 发布

原创最新推荐文章于 2025-05-14 17:03:41 发布 · 615 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

html5 同时被 2 个专栏收录

50 篇文章

订阅专栏

CSS

10 篇文章

订阅专栏

本文介绍了一种使用CSS边框属性来绘制不同方向三角形的方法，通过调整border-width和border-color，可以轻松创建上、下、左、右四个方向的纯色三角形，无需额外图片资源。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">  
    <tittle>三角形</tittle>
    <style>
     /*白色 #fff 可以替换成 transparent 透明色更好一些*/       
     .triangles{ width: 0; height: 0; border-style:solid; float:left; }    
	  .triangles-top{ border-width:60px; border-color:#fff #fff green #fff; }
     .triangles-right{ border-width:60px; border-color:#fff #fff #fff orange; }
     .triangles-bottom{ border-width:60px; border-color:red #fff #fff #fff; }
     .triangles-left{ border-width:60px; border-color:#fff blue #fff #fff; }
    </style>
</head>

<body>   
<div class="triangles triangles-top"></div>
<div class="triangles triangles-right"></div>
<div class="triangles triangles-bottom"></div>
<div class="triangles triangles-left"></div>
</body>
</html>

效果图如下：