css写小三角形

最新推荐文章于 2024-06-19 14:48:22 发布

zhang-php

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量500

点赞数

分类专栏： html5 CSS

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

本文链接：https://blog.csdn.net/qq_37682202/article/details/86136297

版权

html5 同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

<!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>

效果图如下：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhang-php

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css写小三角形

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;tittle&gt;三角形&lt;/tittle&gt; &lt;style&gt; /*白色 #fff 可以替换成 transparent 透明色更好一些*/
复制链接

扫一扫