html代码如下:<div class="circle"></div>
主要用css的border属性来实现高度和宽度设置为0;line-height和font-size也设置为0,主要是解决ie6中容易被撑开的不兼容性问题
第一种斜边在盒子的边上
css代码如下
.circle {
width:0;
height:0;
border:39px solid #000;
border-color:#FF0000 transparent transparent transparent;
border-style:solid dashed dashed dashed;
line-height:0;
font-size:0;
}
由于ie6不支持透明,所以样式里面用dashed来解决不透明问题
运行结果如下图:
第二种是斜边在盒子的对角线上
.circle {
height: 0;
width: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color: #FF9600 #3366ff transparent transparent;
border-style: solid solid dashed dashed;
border-width: 40px 40px 0 0 ;
}
分享到:
相关推荐
通过css代码去实现三角形,用在网页开发中,演示通过css去实现菜色的矩形、上三角形、下三角形、右三角形、左三角形。
css--实现透明三角形(来自百度web前端工程师试题)
用纯css绘制三角形,不是用图片
NULL 博文链接:https://kingkit.iteye.com/blog/692203
还在为网页太多图片加载太慢而发愁吗?纯CSS打造三角形,不需要用图片了!
纯CSS实现多彩三角形有序变化特效动画时尚背景墙。
纯css3实现各种图形样式是一款纯css3样式属性制作各种图形图标样式代码。
复制代码代码如下: <style> .b{ position: absolute; z-index: 2; width: 0; height: 0; line-height: 0; font-size: 0; border-width: 5px;... /*如果倒三角形前面的字多于两个,就设置这里的像素值大些*/
08.code css实现三角形.zip
html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js实现炫酷网页特效html+css+js...
使用CSS创建的图形,无法内置文字或实现文字环绕效果。因此,如何实现不规则图形和文字复杂布局也成为了一个热议话题。 今天我们就来介绍一下如何实现这个效果。文章中我们将阐述如何使用 CSS创建不规则图形,实现不...
css border三角形
css3三角形布局transform旋转列表图片三角形布局代码 css3三角形布局transform旋转列表图片三角形布局代码
纯css绘制几何图形,三角形、圆形(半圆、1/4圆)、多边形(平行四边形、梯形、五边形、六边形、八边形)
CSS3奇思妙想,单标签实现各类图形
css三角形、居中、圣杯布局
CSS3实现图形颜色渐变 CSS3实现图形颜色渐变效果网页特效.zip
CSS实现逼真的三角形播放器按钮CSS实现逼真的三角形播放器按钮
Css画三角形border 加粗。