css三角

左林右李02

已于 2023-02-04 11:09:38 修改

阅读量63

点赞数

分类专栏：前端相关文章标签： css 前端 html

于 2023-02-04 10:53:50 首次发布

原文链接：https://www.bilibili.com/video/BV14J4114768?p=259&vd_source=d3597f8ebc3ce848a9c8b30f3a256672

版权

前端相关专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.实现方式

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
一张图，你就知道 CSS 三角是怎么来的了, 做法如下：

在这里插入图片描述

我们只需要把容器宽高设为0，边框设宽一点，然后三面边框的背景颜色为透明即可。具体代码如下：

.triangle {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border: 50px solid transparent;
  border-left-color: pink;
}

效果如下图
在这里插入图片描述

2.例子

京东商城的三角号
在这里插入图片描述

<!--index.wxml-->
<view class="container">
  <!-- <button type="primary" bindtap="CountChange">+1</button> -->
  <view class="dialog">
    <view class="triangle"></view>
  </view>
</view>

/**index.wxss**/

.dialog {
  width: 200px;
  height: 249px;
  position: relative;
  background-color: rgb(4, 238, 109);
}

.triangle {
  width: 0;
  height: 0;
  position: absolute;
  right: 20px;
  top: -32px;
  line-height: 0;
  font-size: 0;
  border: 16px solid transparent;
  border-bottom-color: tomato;
}