css写不规则三角形

1. 写一个直接三角形，要求宽度为20，高度为48

例如：

css代码如下

width:0;border-left: 10px solid red;border-top: 24px solid transparent;border-right: 10px solid transparent;border-bottom: 24px solid red;

例如：

css代码如下：

width:0;border-left: 10px solid transparent;border-top: 24px solid green;border-right: 10px solid green;border-bottom: 24px solid transparent;

例如：

css代码如下：

   width: 0;border-left: 10px solid red;border-top: 24px solid green;border-right: 10px solid blue;border-bottom: 24px solid orange;

注意！！！：border的宽度为你需要的三角的一半

css写不规则三角形相关推荐

css写出三角形（兼容IE）
利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; border-right: ...
使用CSS写一个三角形
原理主要是通过CSS边框来实现的,边框粗细决定这三角大小. 给盒子宽高为0,给显示的边框添加颜色,其余边框为透明色即可. 第一种方法定义一个盒子box,并设置宽高分别为0,给border的每一个边 ...
css 不规则边角_css绘制不规则三角形
css绘制不规则三角形 css绘制不规则三角形原理: 一个盒子包括: margin+border+padding+content上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下 ...
css3三角形兼容_利用css3特性写出三角形（兼容IE浏览器）
利用CSS写出三角形的效果效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
css 百分比怎么固定正方形_css样式写出三角形，宽高自适应的正方形，扇形！...
闲来无事练习一下常见的css样式,希望大家能指点一二! 1用css实现一个三角形!原理用border属性 <! 实现它的原理那就要弄明白border属性, border是一个复合属性 borde ...
CSS样式写出三角形
CSS样式写出三角形的样式,在这里只举出两个例子,三角形朝上和三角形朝下,还有左上,左下,右上,右下.有需要或者感兴趣的可以自己调一下代码.调border的top.bottom.left.right的 ...
css3 伪类写小三角,详解css如何利用 :before :after 写小三角形
之前写的三角形一直在同一个颜色,没有边框的样式.如下: CSS代码如下: .tri-up{width: 0;height:0;border-left:20px solid transparent;bo ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
css边框三角形怎么用css样式写出三角形 css三角形怎么实现消息框
css实现边框三角形这里我就用css样式写一个下三角的样式其它方向一样只需要给不想要显实的边框设置透明色即可 div{height: 0; width: 0;border-top: 20px s ...

css写不规则三角形

css写不规则三角形相关推荐

最新文章

热门文章