.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 实现三角形、圆形的更多相关文章

  1. CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形

    本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...

  2. css图形——三角形

    1.css图形简介 在浏览网页的时候,我们经常看见各种图形的效果,而但凡涉及到图形效果,我们第一个想到的就是用图片来实现.但是在前端开发中,为了网站的性能速度,我们都是秉承着少用图片的原生质. 因为图 ...

  3. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  4. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  5. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  6. CSS实现三角形

    突然想起搞一把三角形. 简单来说: 建一个div  宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...

  7. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  8. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  9. 用CSS变形创建圆形导航

    http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html 本文由陈毅根据SARA SOUE ...

  10. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

随机推荐

  1. [Tool] Git 使用 与 Git Flow

    目录 简介 Git 命令 Git Flow 简介 Git是目前世界上最先进的分布式版本控制系统(没有之一). Linus花了两周时间自己用C写了一个分布式版本控制系统,这就是Git!一个月之内,Lin ...

  2. ASP.NET MVC 重写RazorViewEngine实现多主题切换

    在ASP.NET MVC中来实现主题的切换一般有两种方式,一种是通过切换皮肤的css和js引用,一种就是通过重写试图引擎.通过重写试图引擎的方式更加灵活,因为我不仅可以在不同主题下面布局和样式不一样, ...

  3. PHP提取字符串中的所有汉字

    <?php $str = 'aiezu.com 爱E族, baidu.com 百度'; preg_match_all("#[\x{4e00}-\x{9fa5}]#u", $s ...

  4. Linux常用操作命令(三)

    查看linux日志某几行 用逆序显示命令tail查看 命令格式:tail [  -r ] [  -n Number ] [ File ] [一]从第3000行开始,显示1000行.即显示3000~39 ...

  5. svg制作风车旋转

    首先用ai画一个简单的风车 例如: svg代码: <animateTransform attributeName="transform" begin="0s&quo ...

  6. ==,=和equals()区别

    equals和=,==的区别   一. ==和equals的区别 1. ==是运算符 2. equals是String对象的方法 一般有两种类型的比较 1. 基本数据类型的比较 2. 引用对象的比较 ...

  7. mysql启动关闭的批处理,感觉很好用在其他论坛帖子上找到的,感谢分享

    最近用mysql的时间比较多,每次都在计算机管理工具下面去启动,感觉很麻烦,于是搜索了下果然有前辈已经做出了这些东西,今天收藏整理,mysql启动关闭的批处理感觉很好用在其他论坛帖子上找到的,感谢互联 ...

  8. Java IO学习笔记(五)对象流

    1.Object流:直接将Object写入或读出. 2.序列化:将Object直接转化成字节流写到硬盘或网络上. 3.如果想把一个对象转化成字节流,该对象的实体类必须得实现Serializable接口 ...

  9. ABP入门系列(19)——使用领域事件

    ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1.引言 最近刚学习了下DDD中领域事件的理论知识,总的来说领域事件主要有两个作用,一是解耦,二是 ...

  10. 关于IO流代码BufferedReader

    package JBJADV003;import java.io.*;public class BufferedReaderTest { /** * @param args */ public sta ...