css 实现三角形、圆形
.div {
width:0px;
height:0px;
border:100px solid red;
border-color:red red transparent transparent;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
border-radius:50%;
}
.div4{
width:0px;
height:0px;
border: 50px solid transparent;
border-color:transparent transparent red transparent;
}
.div3{
width:0px;
height:0px;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 100px solid red;
}
<div class="div"></div>
<div class="div3"></div>
<br>
<div class="div4"></div>
css 实现三角形、圆形的更多相关文章
- CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形
本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...
- css图形——三角形
1.css图形简介 在浏览网页的时候,我们经常看见各种图形的效果,而但凡涉及到图形效果,我们第一个想到的就是用图片来实现.但是在前端开发中,为了网站的性能速度,我们都是秉承着少用图片的原生质. 因为图 ...
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- CSS实现三角形
突然想起搞一把三角形. 简单来说: 建一个div 宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 用CSS变形创建圆形导航
http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html 本文由陈毅根据SARA SOUE ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
随机推荐
- 神奇的 conic-gradient 圆锥渐变
感谢 LeaVerou 大神,让我们可以提前使用上这么美妙的属性. conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟: linear-grad ...
- CSharpGL(42)借助帧缓存实现渲染到纹理(RenderToTexture)
CSharpGL(42)借助帧缓存实现渲染到纹理(RenderToTexture) 渲染到纹理(Render To Texture)是实现很多OpenGL高级效果的一个基础.本文记录了如何用CShar ...
- 出错场景是升级oracle驱动,将版本从ojdbc14升级到ojdbc6,hibernate执行原生态sql语句会报如下错误
出错场景是升级oracle驱动,将版本从ojdbc14升级到ojdbc6,hibernate执行原生态sql语句会报如下错误:org.hibernate.MappingException: No Di ...
- session或memcache过期之后跳转到登陆页面并跳出iframe框架
<!--在你想控制跳转的页面,比如login.html中的<head>与</head>之间加入以下代码:--> <script> if (window ...
- linux下查找某个文件或目录
以查找samba为例:find / -name samba 查找之后得到的结果集如下:/var/lib/samba/var/spool/samba/var/log/samba/usr/lib64/sa ...
- 【Android Developers Training】 37. 共享一个文件
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- linux vim编辑
常用vim操作自我总结,大神请回避: vim 打开退出保存 打开:直接打开 vim practice_1.txt也可以先打开vim,后:e 文件路径 保存::w 文件名或者退出保存:wq! 普通模式下 ...
- HybridApp Exception
HybridApp Exception [创建安卓虚拟机失败]CPU acceleration status:HAXM must be updated(version 1.1.1<6.0.1) ...
- Agile&DevOps究竟谁是魔法棒
天下没有神奇的配方 很抱歉,文章的开头我就要说出这个残酷的事实 - 世界上没有任何工具可以魔法般的让你实现敏捷,精益,DevOps.如果只是依赖了工具的自动化,实现了自动化Dev或者Ops,那么别忘了 ...
- 在当前光标处按指定属性显示字符 - BOIS中断
在当前光标处按指定属性显示字符 - BOIS中断 最简单的调试方式是打印. 编写MBR时,判断MBR是否加载并运行,最直接的方式就是打印一个字符. INT 0x10 功能描述: 在当前光标处按指定属性 ...