1. 概述

1.1 说明

通过边框(border)的宽度与边框圆角(border-radius)来设置所需的三角形与圆形。

1.2 边框

  宽高都为0时,边框设置的不同结果也不同,如下:

  1.四个边框都为10px的实线时,页面上会显示出一个宽高都为20px(边框组织起来的)的正方形

   .div1{
width: 0;
height: 0;
border: 50px solid green;
}

  

2.四个边框都为不同颜色的50px实线,页面上会显示出一个四个三角结合的正方形(宽高为100像素)。

      .div1{
width: 0;
height: 0;
border-left: 50px solid green;
border-right: 50px solid red;
border-top: 50px solid blue;
border-bottom: 50px solid black;
}

  

三角形:显示所需要的边框,其余边框设置为透明即可,如border-left: 50px solid transparent;

1.2 边框圆角

  通过属性 border-radius 可以对边框的直角进行圆滑,设置不同的值展现出的结果不同,当值为边框的一半即50%时,则为圆形展示。下边的50px一般使用50%

 .div1{
width: 100px;
height: 100px;
background: red;
border-radius:50px;
}

  

2. 实例

2.1 三角形

        .div1 {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid red;
}

  

  

CSS 三角形与圆形的更多相关文章

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

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

  2. POJ 2986 A Triangle and a Circle(三角形和圆形求交)

    Description Given one triangle and one circle in the plane. Your task is to calculate the common are ...

  3. 前端读者 | CSS三角形和饼图

    @羯瑞 三角形 .triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green ...

  4. 如何用css实现弧度圆角?三角形以及圆形

    用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border ...

  5. css 实现三角形、圆形

    .div { width:0px; height:0px; border:100px solid red; border-color:red red transparent transparent; ...

  6. css三角形的实现

    实底三角形: <html> <head> <title></title> <style type="text/css"> ...

  7. [CSS]三角形

    CSS盒子模型 当我们把padding和width,height全部设置为0,border设为一个较大的像素时 即:我们需要什么方向的三角形,只需把其余的三角形背景色设置为transparent:

  8. CSS三角形广告文字

    街上经常碰到一些发各类广告传单的,有一次收到一张房地产广告的传单,顺手留下来,看着里面有些广告挺吸引人,同时也想练练自己css技术,故抽空做了一下. 原图某区域如下: 实现上图效果是需要一些想象力的, ...

  9. 纯css三角形

    三角形原理: 盒子c内容width为0,height为0,盒子给一定宽度的border,分别为四边的border设置不同的颜色,则可以得到不同样式的三角形举个简单的栗子:CSS代码 .box1{ wi ...

随机推荐

  1. java操作数据库:分页查询

    直接上.... 还是用之前的goods表,增加了一些数据 1.实体类Goods // 封装数据 public class Goods { private int gid; private String ...

  2. XOR 加密

    XOR 是一个神奇的运算符, 观察它的真值表, 很容易得到以下结论: 假设现有 a , b 变量, 则 a ^ 0 == a a ^ 0xff == ~a (取反加1等于作为补码的a的真值的相反数的补 ...

  3. 新萌渗透测试入门DVWA 教程1:环境搭建

    首先欢迎新萌入坑.哈哈.你可能抱着好奇心或者疑问.DVWA 是个啥? DVWA是一款渗透测试的演练系统,在圈子里是很出名的.如果你需要入门,并且找不到合适的靶机,那我就推荐你用DVWA. 我们通常将演 ...

  4. system("x")

    system("pause");和system("cls")使用示例程序 #include "stdio.h" #include " ...

  5. 5.28 js基础 简介

    Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) JavaScript历史背景介绍 布 ...

  6. php 调试的常用方法

    1. php 页面直接输出错误, 根据错误进行调试 2.无法通过php页面捕获到错误,通过查看apache2的日志错误进行排查,  像通过系统命令进行操作失败时,就需要日志进行查看

  7. C语言库函数syslog

    参考链接:  http://blog.csdn.net/jiangxinyu/article/details/1473356

  8. 现代C++简单介绍

    C++ 是世界上最常用的编程语言之一.编写良好的 C++ 程序是快速.高效的. 该语言比其他语言更加灵活,因为你可以使用它来创建各种应用,包括有趣刺激的游戏.高性能科学软件.设备驱动程序.嵌入式程序和 ...

  9. Springboot/cloud 项目突然出现许多Failed to read artifact descriptor, 或者无法解析

    由于jar 包冲突,还是什么原因引起 在仓库下即:.m2 下面执行以下命令(cmd) for /r %i in (*.lastUpdated) do del %i 然后对项目用maven update ...

  10. mysql原理~创建用户的那些事情

    一 简介:mysql是如何创建用户的二 基本语法:  1 grant 权限 on db.table to 'user'@'ip' identified by 'password'     目的 创建用 ...