css3中利用border-color 制作三角形

最近回过头看css3的一些属性，发现一个以前并没有深入了解的一个属性border-color，，这个属性可以设置边框的四条边的颜色，代码如下：

 <style>
        div{
            width:0px;
            height: 0px;
            border: 60px solid red;
            border-color:green pink;
        }
    </style>
</head>
<body>
<div></div>
</body>

上图是显示效果，，，，

时间： 2024-08-11 07:49:55

css3中利用border-color 制作三角形的相关文章

为什么利用border可以实现三角形

前言:网上最普遍的实现三角形的方法,就是通过控制border来实现,那为什么可以呢? 原理我们先来看看border的表现形式. #box{ width:100px; height:100px; background:yellow; border-top: 20px solid red; border-right:20px solid black; border-bottom:20px solid green; border-left:20px solid blue; } 观察上图可以发现,bo

web中利用边框制作三角形

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>边框制作三角形</title> <style> div{ width:0px; height:0px;//让块的高和宽为零,是下面边框汇成一点 border-bottom: 100px solid orange; border-left: 100px solid transparent;

利用css3动画和border来实现圆形进度条

最近在学习前端的一些知识,发现border的功能十分强大啊! 首先来看看demo 就是这么一个圆形的进度条,在文本框中输入0-100的数值下面的进度条相应的转到多少这个主要是利用border,旋转和css动画来实现的,主要思想是利用两个div来互相遮挡border形成的一个只有半圈有颜色的圆形,再利用旋转div的角度来调整显示上代码: html+css+js(这里引入了jquery) <!DOCTYPE html> <html lang="en"> <

利用div和css制作三角形效果

利用div和css制作三角形效果:本章节介绍一下如何利用div和css实现三角形效果,虽然看起来表神奇,但是原理是非常的简单.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁

利用CSS3 中steps()制用动画

.monster { width: 190px; height: 240px; margin: 2% auto; background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center; animation: play .8s steps(10) infinite; } @keyframes play { 100% { background-posi

在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的"Values and Units"模块中定义的一个角度单位. 2.缩放 transform:scale(0.8,1); 使用缩放的方法实现文字或图像的缩放效果,在参数中指定缩放倍率.该语句使用scale方法使该元素在水平方向上缩小了20%,垂直方向上不缩放. 3.倾斜 transform:ske

原来css中的border还可以这样玩

原来css中的border还可以这样玩前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果. 用css中的border绘制鸡蛋形状: 是的你没看错,这里是要做绘制一个类似于鸡蛋的效果. 思路:我们先用div绘制一个正方形,然后利用设置border-radius: 50%;,这样

css中的border还可以这样玩

在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果. 用css中的border绘制鸡蛋形状: 是的你没看错,这里是要做绘制一个类似于鸡蛋的效果. 思路:我们先用div绘制一个正方形,然后利用设置border-radius: 50%;,这样我们就可以得到一个圆形的效果,代码如下: html代

css3中的变形（transform）、过渡(transtion)、动画(animation)

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧.是构成transtion和animation的基础. 语法: transform : none | <transform-func