仿小米实现的纯CSS等腰直角三角形 + 仿京东实现纯CSS非等腰直角三角形+聊天框的冒泡样式

最新推荐文章于 2023-04-06 23:18:30 发布

鸭绒

最新推荐文章于 2023-04-06 23:18:30 发布

阅读量561

点赞数 1

分类专栏：布局效果文章标签： html css3 html5 前端 css

本文链接：https://blog.csdn.net/weixin_43334673/article/details/107297866

版权

本文详细介绍了如何使用CSS来创建等腰直角三角形（如仿小米实现）和非等腰直角三角形（仿京东），并展示了如何制作聊天框的冒泡样式。通过设置无宽高容器的边框，并调整透明度，可以灵活创造出不同类型的三角形。最后，作者总结了三角形创建的关键步骤：利用无宽高容器、边框和透明度来定位和造型。

摘要由CSDN通过智能技术生成

我们都是到页面的边框通常是矩形或者椭圆形，那三角形是少见的，那我们用CSS怎么做才能实现三角形呢？

文章目录

1.实现三角形原理

先给你看看这样的效果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空隙bug</title>
    <style>
      .triangle {
    
        height: 0px;
        width: 0px;
        border-top: 50px solid blue;
        border-right: 50px solid red;
        border-bottom: 50px solid yellow;
        border-left: 50px solid aqua;
      }
    </style>
  </head>
  <body>
    <div class="triangle"></div>
  </body>
</html>

效果图：
在这里插入图片描述
哇，三角形出现了喔。

实现步骤：

一个没有宽度、高度的容器
仅给容器设置边框即可，边框大小决定三角形大小
如果只要其中一个三角形，那就把其它三个三角形设置透明(transparent)即可

例如我们要左三角：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空隙bug<

最低0.47元/天解锁文章

鸭绒

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
仿小米实现的纯CSS等腰直角三角形 + 仿京东实现纯CSS非等腰直角三角形+聊天框的冒泡样式

我们都是到页面的边框通常是矩形或者椭圆形，那三角形是少见的，那我们用CSS怎么做才能实现三角形呢？文章目录1.实现三角形原理2.仿小米商场三角形3. 仿京东非等腰直角三角形4.总结1.实现三角形原理先给你看看这样的效果：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=.
复制链接

扫一扫

专栏目录