首页 > 其他分享 >CSS---写三角形

CSS---写三角形

时间:2023-06-02 09:35:14浏览次数:58  
标签:solid 50px --- color 三角形 border transparent CSS

我们在做项目开发的时候,经常会遇到需要三角小按钮,如果不引入图片和字体,其实用样式也是可以写处理的。

具体示例:

.div{width: 50px; height: 50px; border-left: 50px solid red; border-right: 50px solid yellow; border-top: 50px solid blue; border-bottom: 50px solid green;}

通过这个样式,可以写出边框为50px的DIV:

 此时,将宽度和高度调整为:0

.div{width: 0px; height: 0px;}

 然后,将任意的三条边颜色设置为白色或透明:

.div{border-right-color: transparent; border-left-color: transparent; border-bottom-color: transparent;}

然后就形成了:

 CSS写三角形就完成了。

标签:solid,50px,---,color,三角形,border,transparent,CSS
From: https://www.cnblogs.com/e0yu/p/17450873.html

相关文章

  • Easy-Es
     使用过SpringData操作ES的小伙伴应该有所了解,它只能实现一些非常基本的数据管理工作,一旦遇到稍微复杂点的查询,基本都要依赖ES官方提供的RestHighLevelClient,SpringData只是在其基础上进行了简单的封装。最近发现一款更优雅的ESORM框架Easy-Es,使用它能像MyBatis-Plus一样操......
  • 认识LightDB - 高可用安装
    认识LightDB-高可用安装LightDB是恒生电子股份有限公司开发的一款关系型数据库,基于PostgreSQL生态。LightDB分为lightdb-x与lightdb-a两款产品,-a是基于Greeplum开发的,适用于OLAP场景,不太适合日间实时交易。本文若不进行特殊说明,所有LightDB都指的是lightdb-x......
  • 扩散模型 - DDPM 优化
    3DDPM的优化3.1参数优化3.1.1优化βt在"ImprovedDenoisingDiffusionProbabilisticModels".一文中,作者提出了多种优化DDPM的技巧。其中一种就是把βt的线性机制改为余弦机制。机制(schedule)函数的实现相对灵活,只要保证在训练的中间过程提供近似-线性的下降并且在......
  • vue基础用法-内容渲染指令
    1.指令的概念指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。vue中的指令按照不同的用途可以分为如下6大类:内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令注意:指令是vue开发中最基础、最常用、最简单的知识......
  • 华硕主板设置AMD-V方式
    进入BIOS界面开机/重启计算机时快速按压delete键,进入BIOS界面。开启AMD-V进入高级模式-》高级-》CPUConfiguration-》SVMMode-》Enabled设置好后按压F10键,点击OK,保存并退出,BIOS设置完成。大功告成!!!......
  • 6-1总结
    今天是6.1儿童节的一天 最后的最近只是进行了总结。然后就是想说对于上次的javaweb测试其实还应该有更多的分数的然后是其实对于基础的代码逻辑其实还是比较模糊的这次的测试可以看出王老板是放了很多水的但是对于我来说我能过实现的只是对于一个成功的系统的crud但是我觉......
  • 算法学习day39动态规划part02-62、63
    packageLeetCode.DPpart02;/***62.不同路径*一个机器人位于一个mxn网格的左上角(起始点在下图中标记为“Start”)。*机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为“Finish”)。*问总共有多少条不同的路径?*示例:*输入......
  • 蓝桥杯----图论训练
    STL当想要维护一个数组,其中的元素要求有序,同时可能随时对这个数组中的元素进行增减有没有一个STL可以快速维护一个这样的数组?multiset(平衡二叉树) 默认从小到大排序注意离散化中清除重复元素的原理:unique()函数     vector......
  • 算法学习day41动态规划part03-343、96
    packageLeetCode.DPpart03;/***343.整数拆分*给定一个正整数n,将其拆分为k个正整数的和(k>=2),并使这些整数的乘积最大化。*返回你可以获得的最大乘积。*示例:*输入:n=2*输出:1*解释:2=1+1,1×1=1。**/publicclassIntegerBre......
  • CSS 第8天
    CSS第8天复习定位 position​ relative top,left,right,bottom 子绝父相​ absolute 居中​ fixed​ 遮盖 1,2​ z-index 拼爹浏览器hack​ htmlhack ​ csshack​ 值hack ie6-_ 7! 8|9\0 678910\9​ 选择器hack 6*htlm 7selector......