CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式

20171112 发布于2019-08-30 15:54 / 2031人阅读

摘要：今天我们介绍几种，用实现左上朝向三角形的写法。示意图以宽高各为例这种三角形，一般可以用来做对话框类型图形的左下小脚。第一种第二种第三种大家可以尝试更多种的三角形做法，以及不同朝向的三角形。这里强烈推荐一个常用图形的展示网站

今天我们介绍几种，用css实现左上朝向三角形（Top-Left Triangle）的写法。

示意图（以宽高各60px为例）：

这种三角形，一般可以用来做“对话框”类型图形的左下小脚。

第一种：

#triangle-topleft {
  border: 30px solid #e6686e;
  height: 0;
  width: 0;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

第二种：

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 60px solid #e6686e;
  border-right: 60px solid transparent;
}

第三种:

#triangle-topleft {
  border: 60px solid transparent;
  width: 0;
  height: 0;
  border-left-color: #e6686e;
  border-top-width: 0;
}

大家可以尝试更多种的三角形做法，以及不同朝向的三角形。
这里强烈推荐一个常用css图形的展示网站：https://css-tricks.com/the-sh...

Written by：EdenSheng
Email：singlesaulwork@gmail.com

云服务器 GPU云服务器 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式最基本的几种

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117047.html

CSS 搞事技巧：border+transparent

摘要：默认盒模型的正方形在上方已经说明了，正方形的被挤压为时就会得到三角形的效果。这里选择一种较为取巧的形式，因为这边使用的是行内样式，所以可以直接在它的上获取。面试前还是要为面试刷下题目的，不然真的容易懵介绍出门忘带电源线，快递到了终于可以继续水文章了。好不容易获得一个面试机会，面试官很 Nice，可惜的是当时处于懵逼状态，错过了大好的机会：面试官：巴拉巴拉吧…… 我：嗯，啊，这个，...

nifhlheimr 2019-08-29 18:37 评论0 收藏0
css使用border画三角形

摘要：宽度被设为的边框对应方向的边框会形成较大的三角形，且长度加倍的采纳的显示其实也是用三角形实现的上部分是包含采纳两个字的块状元素，设置。前端中的很多地方都会用到三角形，比如tooltip等CSS中创建三角形的方法很多，可以参考这里： CSS创建三角形（小三角）的几种方法比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现将边框分别设置为红/黄/蓝/绿 .triang...

张红新 2019-08-28 18:20 评论0 收藏0
使用CSS生成图标

摘要：理解这一点让上边和下边也变成三角形就简单了，将元素的属性设为现在上下左右个边框都是三角形了。实例二制作快进按钮效果为了减少页面的元素，我们可以只提供一个元素实现第个三角形，然后借助的伪类实现第个三角形。有一次笔者在参加前端面试的过程中被面试官问到这样一个问题： BootStrapt里面的图标是怎么样的？用过Bootstrapt的开发者都知道，在Bootstrapt里面有一个图标组件，...

helloworldcoding 2019-08-29 11:18 评论0 收藏0
使用CSS生成图标

摘要：理解这一点让上边和下边也变成三角形就简单了，将元素的属性设为现在上下左右个边框都是三角形了。实例二制作快进按钮效果为了减少页面的元素，我们可以只提供一个元素实现第个三角形，然后借助的伪类实现第个三角形。有一次笔者在参加前端面试的过程中被面试官问到这样一个问题： BootStrapt里面的图标是怎么样的？用过Bootstrapt的开发者都知道，在Bootstrapt里面有一个图标组件，...

godiscoder 2019-08-01 15:42 评论0 收藏0