css三角形 | 易学教程

CSS矩形、三角形等

阅读更多关于 CSS矩形、三角形等

1、圆形 CSS代码如下：宽高一样，border-radius设为宽高的一半 #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 2、椭圆 CSS代码如下：border-radius:水平半径/垂直半径 #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 3、等边三角上三角CSS代码如下：设置border-bottom宽度实线颜色，左右border左右宽度为一半，实线透明。下三角、左三角、右三角可举一反三实现。 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 4、直角三角

CSS盒模型详解（图文教程）

阅读更多关于 CSS盒模型详解（图文教程）

本文最初发表于博客园，并在 GitHub 上持续更新。以下是正文。盒子模型前言盒子模型，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。盒子中的区域一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。盒子模型的示意图：代码演示：上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。这是因为还要加上padding、border。注意：宽度和真实占有宽度，不是一个概念！来看下面这例子。标准盒模型和IE盒模型我们目前所学习的知识中，以标准盒子模型为准。标准盒子模型： IE盒子模型：上图显示：在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。 CSS盒模型和IE盒模型的区别：在标准盒子模型中，

CSS模块化：less

阅读更多关于 CSS模块化：less

less的安装与基本使用 less的语法及特性一、本地使用less的方法 Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。是一种动态样式语言，属于css预处理语言的一种。下载后找到less.js：less.js-2.5.3\dist\less.js 也可以直接使用CDN缓存： < script src ="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js" ></ script > 注意link的rel属性： < link rel ="stylesheet/less" type ="text/css" href ="styles.less" /> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet/less"

css小技巧

阅读更多关于 css小技巧

最近工作收集的一些css的小技巧：一、黑白图像当你需要让一张彩色的图片显示为黑白照片的时候，你可以用下面的一段代码。 img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } 二、使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 .nav li{ border-right: 1px solid #666; } 然后再除去最后一个元素 .nav li:last-child{ border-right: none; } 也可以直接使用 :not() 伪类来应用元素 .nav li:not(:last-child){ border-right: 1px solid #666 } 如果你的元素有兄弟元素的话，也可以使用通用的熊年底选择符( ~ ） .nav li:first-child ~ li{ border-left: 1px solid #666 } 三、页面顶部阴影给网页加上漂亮的顶部阴影效果 body:before{ content: ''; position: fixed; top:

如何用css画出三角形

阅读更多关于如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形众所周知好多图形都可以拆分成三角形，所以说会了画三角形就可以画出很多有意思的形状画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。如果你将宽度调的足够大，改变不同方向的颜色，你就可以发现盒模型的border是四个梯形一样的线条。这个时候如果将盒模型内部的height，width调为0px，则三角形就形成了。 1 border:100px solid transparent 　　//边框100px，实线，透明颜色，下面三行代码等同于此句 2 border-width:15px;　　　　　　　　//border-width代表所有方向的border 3 border-style:solid; 4 border-color:transparent；如果你看明白了原理那么现在你应该已经可以自己写出代码了。 1 width: 0; 2 height: 0; 3 border-left: 50px solid transparent;　　　　//左边宽度50px，实线，透明颜色 4 border-right: 50px solid transparent;　　　　//右边同上 5 border-top: 100px solid red;　　　　　　　　//上边宽度100px，实线，红色

CSS中的“形状”

阅读更多关于 CSS中的“形状”

CSS所能展现出的 ”形状“ 下面的所有案例的实现都只用到了一个html元素（例如div）。虽然CSS在每一种浏览器中都有兼容性差异，但是这些例子至少支持一种以上浏览器（例如chorme）。正方形矩形圆形椭圆形尖角朝上的三角形尖角朝下的三角形尖角朝左的三角形尖角朝右的三角形尖角在左上的三角形尖角在右上的三角形尖角在左下的三角形尖角在右下的三角形弯尾箭头梯形平行四边形六角星形五角星形五边形六边形八边形心形横8形正方片形金刚盾形方片形钻石形鸡蛋型吃豆人提示框 12角形 8角形八卦丝带徽章太空侵略者电视屏幕雪佛龙放大镜 Facebook icon 扇形月亮弯形旗来源： https://www.cnblogs.com/dengzk/p/4956571.html

神奇的CSS形状

阅读更多关于神奇的CSS形状

在StackOverflow上有这么一个问题，有位同学在 http://css-tricks.com/examples/ShapesOf CSS/ 找到一些使用CSS做的形状，其中一位同学对下面的这个形状充满了疑问。形状是：代码是： #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 这位同学就提问啦，为啥这么这么几句就能画出一个三角形呢？于是呢，有高人出现，这个高人图文并茂的解释了这个三角的成因首先呢，我们需要了解HTML标记的Box Model（盒模型），这个例子中呢我们将 content，padding都看作content。忽略掉margin。那么一个盒模型就是下图中间是内容，然后是4条边。每一条边都有宽度。根据上面CSS的定义，没有border-top（顶边）的情形下 ,我们的图形如下： width设置为0后，内容没有了就成为下图： height也设置为0，只有底边了。然后两条边都是设置为透明，最后我们就得到了这个属于奇技淫巧，但是也说明CSS的强大，没有做不到只有想不到。另外 http://css-tricks.com

奇妙的 CSS几何图形

阅读更多关于奇妙的 CSS几何图形

三角形：通常会使用透明的border模拟出一个三角形：▲ .traingle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid yellowgreen; } 切角：采用多重线性渐变实现切角 .notching { width: 40px; height: 40px; padding: 40px; background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left, linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right, linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right, linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } 梯形：

css实现实心三角形

阅读更多关于 css实现实心三角形

1、html <body style="flex-direction: column; height: 600px;display: flex; justify-content: center; align-items: center;">  <div class="up"></div></br>  <div class="down"></div></br>  <div class="left"></div></br>  <div class="right"></div> </body> 2、css /*想获取朝那边三角形,给相反的一边设置颜色,font-size: 0;line-height: 0;可以兼容ie6*/ .up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #f00; font-size: 0; line-height: 0; } .down { width: 0; height: 0; border-left: 20px solid transparent;

详解css绘制三角形

阅读更多关于详解css绘制三角形

1.首先画一个div，给固定宽高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Trangle</title> <style> div{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <h3>三角形</h3> <div> </div> </body> </html> 2.给div加上边框顺序为上，右，下，左 div{ width: 100px; height: 100px; background-color: red; border-top:50px solid mediumpurple; border-right: 50px solid blue; border-bottom: 50px solid green; border-left: 50px solid saddlebrown; } 3.去掉div的宽度和高度 div{ width: 0px; height: 0px; background-color: red; border-top:50px solid mediumpurple; border-right: 50px solid blue; border-bottom

订阅 css三角形