CSS 三角形与圆形
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 三角形与圆形的更多相关文章
- 用CSS变形创建圆形导航
http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html 本文由陈毅根据SARA SOUE ...
- 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 ...
- 前端读者 | CSS三角形和饼图
@羯瑞 三角形 .triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green ...
- 如何用css实现弧度圆角?三角形以及圆形
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border ...
- css 实现三角形、圆形
.div { width:0px; height:0px; border:100px solid red; border-color:red red transparent transparent; ...
- css三角形的实现
实底三角形: <html> <head> <title></title> <style type="text/css"> ...
- [CSS]三角形
CSS盒子模型 当我们把padding和width,height全部设置为0,border设为一个较大的像素时 即:我们需要什么方向的三角形,只需把其余的三角形背景色设置为transparent:
- CSS三角形广告文字
街上经常碰到一些发各类广告传单的,有一次收到一张房地产广告的传单,顺手留下来,看着里面有些广告挺吸引人,同时也想练练自己css技术,故抽空做了一下. 原图某区域如下: 实现上图效果是需要一些想象力的, ...
- 纯css三角形
三角形原理: 盒子c内容width为0,height为0,盒子给一定宽度的border,分别为四边的border设置不同的颜色,则可以得到不同样式的三角形举个简单的栗子:CSS代码 .box1{ wi ...
随机推荐
- XOR 加密
XOR 是一个神奇的运算符, 观察它的真值表, 很容易得到以下结论: 假设现有 a , b 变量, 则 a ^ 0 == a a ^ 0xff == ~a (取反加1等于作为补码的a的真值的相反数的补 ...
- vs2013 配置支持https的libcurl
需求:在vs2013上配置支持https协议的libcurl. 环境:win7(64位),vs2013 一.安装openssl: 需要先安装nasm和ActivePerl. nasm需要手动配置环境变 ...
- 在window上使用 linux shell 删除文件夹递归地
目的 在windows环境下, 整理代码,代码中含有 .svn 文件夹, 此文件夹在所有受控目录下都存在, 需要统一删除. 但是对windows的shell不熟悉,想用linux rm来删除, 如何实 ...
- web-hacking
https://wizardforcel.gitbooks.io/web-hacking-101/content/1.html
- pycharm上传代码到github
一.配置pycharm 点击create API,添加自己的github账号,切记将clone git 那个对勾去掉,不然会报: Successfully created project ‘…’ on ...
- vscode隐藏运行ts生成的js文件和map文件
在code-首选项-用户设置中放入以下代码,覆盖原有的 { "files.exclude": { "node_modules": true, "**/ ...
- python写商品管理练习
#.添加 #.商品名称 #.要从文件里面把所有的商品读出来 #.价格 #.写一个方法判断是否为合理的价格 #.数量 #整数 # product = { # "爱疯差":{ # &q ...
- call 和 apply 的区别
call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.因为 JavaScript 的函数存在「定义时上下文」和「 ...
- 《jQuery精品教程视频》视频目录
\day01\03-视频\02-使用js的缺点.avi; \day01\03-视频\03-jQuery初体验.avi; \day01\03-视频\04-什么是jQuery.avi; \day01\03 ...
- renren-security旧版本 分模块 的模块之间关系浅析
Maven结构,一个父模块 六个子模块 七个pom.xml: \git\renren-security\pom.xml <modules> <module>renren-com ...