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 ...
随机推荐
- java操作数据库:分页查询
直接上.... 还是用之前的goods表,增加了一些数据 1.实体类Goods // 封装数据 public class Goods { private int gid; private String ...
- XOR 加密
XOR 是一个神奇的运算符, 观察它的真值表, 很容易得到以下结论: 假设现有 a , b 变量, 则 a ^ 0 == a a ^ 0xff == ~a (取反加1等于作为补码的a的真值的相反数的补 ...
- 新萌渗透测试入门DVWA 教程1:环境搭建
首先欢迎新萌入坑.哈哈.你可能抱着好奇心或者疑问.DVWA 是个啥? DVWA是一款渗透测试的演练系统,在圈子里是很出名的.如果你需要入门,并且找不到合适的靶机,那我就推荐你用DVWA. 我们通常将演 ...
- system("x")
system("pause");和system("cls")使用示例程序 #include "stdio.h" #include " ...
- 5.28 js基础 简介
Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) JavaScript历史背景介绍 布 ...
- php 调试的常用方法
1. php 页面直接输出错误, 根据错误进行调试 2.无法通过php页面捕获到错误,通过查看apache2的日志错误进行排查, 像通过系统命令进行操作失败时,就需要日志进行查看
- C语言库函数syslog
参考链接: http://blog.csdn.net/jiangxinyu/article/details/1473356
- 现代C++简单介绍
C++ 是世界上最常用的编程语言之一.编写良好的 C++ 程序是快速.高效的. 该语言比其他语言更加灵活,因为你可以使用它来创建各种应用,包括有趣刺激的游戏.高性能科学软件.设备驱动程序.嵌入式程序和 ...
- Springboot/cloud 项目突然出现许多Failed to read artifact descriptor, 或者无法解析
由于jar 包冲突,还是什么原因引起 在仓库下即:.m2 下面执行以下命令(cmd) for /r %i in (*.lastUpdated) do del %i 然后对项目用maven update ...
- mysql原理~创建用户的那些事情
一 简介:mysql是如何创建用户的二 基本语法: 1 grant 权限 on db.table to 'user'@'ip' identified by 'password' 目的 创建用 ...