CSS——CSS实现各种三角形样式

html代码：

 <div class="all"></div><div class="top_triangle"></div><div class="bottom_triangle"></div><div class="left_triangle"></div><div class="right_triangle"></div>

css代码：

.all{width: 0;height: 0;border-bottom:50px solid yellow;border-right: 50px solid green;border-left: 50px solid red;border-top: 50px solid pink;}.top_triangle{width: 0;height: 0;border-bottom:50px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;}.bottom_triangle{width: 0;height: 0;border-top:50px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;}.left_triangle{width: 0;height: 0;border-left: 50px solid red;border-bottom:50px solid transparent;border-top:50px solid transparent;}.right_triangle{width: 0;height: 0;border-top: 50px solid transparent;border-bottom:50px solid transparent;border-right: 50px solid red;}

效果：

CSS——CSS实现各种三角形样式相关推荐

css镂空三角形样式
前言对话框----镂空三角形样式原理 1)利用伪元素 :before :after 2):before ,border做出大三角形样式 3):after,border做出小三角形样式 4)小三角形 ...
CSS浮动定位与背景样式
CSS浮动定位与背景样式 1.浮动与定位 1.1 浮动的基本概念本质功能 : 实现块元素并排布局使用要点 : 1.要浮动,并排的盒子都要设置浮动2.父盒子宽度足够,否则会被迫换行3.子盒子会按顺序 ...
html实现游戏鼠标样式,巧妙运用CSS立刻改变鼠标的样式
巧妙运用CSS立刻改变鼠标的样式互联网发布时间:2008-10-17 19:27:05 作者:佚名我要评论用惯了Windows的人对各种各样的鼠标样式一定不会陌生.当鼠标移动到不同 ...
CSS画圆、三角形、品字、骰子
CSS画圆.三角形.品字.骰子前言:这篇文章主要是本人正在看面试题,面试题当成八股文来背,太难了.所以,通过写笔记,并自己实践来加深印象.如果这篇文章对你有帮助,请不要吝啬你的赞. 圆让 bord ...
[译] JavaScript 中的 CSS：基于组件的样式的未来
本文讲的是[译] JavaScript 中的 CSS:基于组件的样式的未来, 原文地址:CSS in JavaScript: The future of component-based styling ...
三角形css_纯 CSS 实现绘制各种三角形（各种角度）
转载至:纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red, ...
html里range怎么改样式,CSS之修改input range样式 [ lion1ou ]
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 今天来探讨一下 HTML5 的 range 这个新的 input 类型,不过重点不是在 range 要如何使用,而是在如 ...
Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)
CSS语法基础一.单纯html控制样式的缺点二. CSS✪✪✪ CSS概述 CSS基础语法组成选择器标签选择器类选择器 id选择器通配选择器后代选择器插入样式表的三种方式行内样式 ...
Web前端开发笔记——第三章 CSS语言第一节 CSS的基本概念和样式表
目录一.CSS和HTML 二.CSS的基本语法格式三.CSS样式设置 (一)行内样式 (二)内嵌样式 (三)引用外部CSS文件四.多重样式优先级结语一.CSS和HTML CSS,又称为层叠样 ...
html h1转换为行内,css中转换为行内样式的解决方案(css-inline)
聊聊场景发送邮件在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信.今日头条等自媒体在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变解决方案这两种方案功能和 Ap ...

CSS——CSS实现各种三角形样式

html代码：

css代码：

效果：

CSS——CSS实现各种三角形样式相关推荐

最新文章

热门文章