HTML+CSS实现倒三角符号

最新推荐文章于 2024-04-23 14:33:07 发布

lujie_1996

最新推荐文章于 2024-04-23 14:33:07 发布

阅读量1.5w

点赞数

分类专栏： Front End 文章标签： html css 网页设计倒三角

本文链接：https://blog.csdn.net/lujie_1996/article/details/77932343

版权

Front End 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在网页设计中通常需要实现倒三角符号的效果，比如下图当当网的搜索框：

那么，我们做出的最终效果是这样的：

<!DOCTYPE html>
<html>
<head>
         <title></title>
         <style type="text/css">
                   .nabla {
                            width: 0px;
                            height: 0px;
                            border-top: 10px solid red;
                            border-left: 10px solid transparent;
                            border-right: 10px solid transparent;
                   }
         </style>
</head>
<body>
         <div class="nabla"></div>
</body>
</html>