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. XOR 加密

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

  2. vs2013 配置支持https的libcurl

    需求:在vs2013上配置支持https协议的libcurl. 环境:win7(64位),vs2013 一.安装openssl: 需要先安装nasm和ActivePerl. nasm需要手动配置环境变 ...

  3. 在window上使用 linux shell 删除文件夹递归地

    目的 在windows环境下, 整理代码,代码中含有 .svn 文件夹, 此文件夹在所有受控目录下都存在, 需要统一删除. 但是对windows的shell不熟悉,想用linux rm来删除, 如何实 ...

  4. web-hacking

    https://wizardforcel.gitbooks.io/web-hacking-101/content/1.html

  5. pycharm上传代码到github

    一.配置pycharm 点击create API,添加自己的github账号,切记将clone git 那个对勾去掉,不然会报: Successfully created project ‘…’ on ...

  6. vscode隐藏运行ts生成的js文件和map文件

    在code-首选项-用户设置中放入以下代码,覆盖原有的 { "files.exclude": { "node_modules": true, "**/ ...

  7. python写商品管理练习

    #.添加 #.商品名称 #.要从文件里面把所有的商品读出来 #.价格 #.写一个方法判断是否为合理的价格 #.数量 #整数 # product = { # "爱疯差":{ # &q ...

  8. call 和 apply 的区别

    call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.因为 JavaScript 的函数存在「定义时上下文」和「 ...

  9. 《jQuery精品教程视频》视频目录

    \day01\03-视频\02-使用js的缺点.avi; \day01\03-视频\03-jQuery初体验.avi; \day01\03-视频\04-什么是jQuery.avi; \day01\03 ...

  10. renren-security旧版本 分模块 的模块之间关系浅析

    Maven结构,一个父模块 六个子模块 七个pom.xml: \git\renren-security\pom.xml <modules> <module>renren-com ...