纯CSS画几何图形

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS画几何图形</title>
</head>

<body>

	<!--多彩空心矩形-->
	<div style="width:100px; height:100px; border-width:20px; border-style:solid; border-color:red green blue gray;"></div><br/>
    <!--多彩矩形-->
    <div style="width:0px; height:0px; border-width:40px; border-style:solid; border-color:red green blue gray;"></div><br/>
	<!--圆-->
    <div style="width:100px; height:100px; background:green; border-radius:100px;"></div><br/>
    <!--矩形-->
    <div style="width:100px; height:80px; background:green;"></div><br/>
    <!--等腰三角形-->
    <div style="width:0px; height:0px; border-bottom:50px solid green; border-left:50px solid transparent;border-right:50px solid transparent;"></div><br/>
    <!--左上三角-->
	<div style="width:0px; height:0px; border-top:100px solid green; border-right:100px solid transparent;"></div><br/>
    <!--等腰梯形-->
    <div style="width:100px; height:0px; border-bottom:100px solid green; border-left:50px solid transparent; border-right:50px solid transparent;"></div><br/>
    <!--六边形-->
    <div>
    	<div style="width:0px; height:0px; border-bottom:30px solid green; border-left:52px solid transparent; border-right:52px solid transparent;"></div>
        <div style="width:106px; height:60px; background:green;"></div>
        <div style="width:0px; height:0px; border-top:30px solid green; border-left:52px solid transparent; border-right:52px solid transparent;"></div>
    </div>
    <!--画横线-->
    <hr style="background:red; width:280px; height:6px;"/>
    <!--画竖线-->
    <div style="width:0px; height:60px; border-left:8px solid red;"></div><br/>
</body>
</html>

　结果如图：　

时间： 2024-10-15 21:24:04

纯CSS画几何图形的相关文章

CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形最终效果: CSS代码如下: 复制代码代码如下: #square { width: 100px; height: 100px; background: red; }

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形最终效果: CSS代码如下: 1 #square {

【原创】纯CSS画黄金梅丽号！

代码如下 <!DOCTYPE html>  <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>黄金梅丽号

纯css 画气泡

我们知道运用css可以绘画出各式各样的形状:三角形,圆形,正方形,椭圆形,平行四边形等等,而通过他们之间进行两两组合可以变换出各种意想不到的效果图,气泡框就是其中一个.最简单的气泡框就是一个矩形框+一个三角框. 我们先来看看用css如何画三角形: css绘三角形之 border方法先画一个100*100的矩形,给他四边加上不同颜色的边框.代码如下: .demo{ width:100px; height:100px; border:50px solid ;border-color:red pi

8.17 纯css画一个着重号图标

今天看到一个同事写的着重号图标,我以为是图片,仔细一看,是span标签!哇!!学习一下哈哈图标长这样: CSS代码: .hint{ display: inline-block; width: 20px; height: 20px; line-height: 20px; border: 1px solid red; border-radius: 10px; color: red; text-align: center; margin-left: 10px; cursor: default; }

纯css 画箭头

原理: 把容器的边框设置大一点,容器本身的长宽为0,只设置一边的颜色让其自然形成箭头参考文章 http://yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

纯CSS画的圆圈

css: <div style="width:200px;height:200px;border:10px solid #0000ff;border-radius:110px;-moz-border-radius:110px;margin:auto"></div>

用CSS画英文字母

起因是在网上看到了有人用纯css画出了英文字母,感觉不难,了解过css3的话都会感觉思路比较直观主要用到的css知识点:绝对定位,圆角属性以及元素的宽高均为零时边框的挤压性质效果图源代码 <!DOCTYPE html> <html> <head> <title>CSS-Letter</title> <meta charset="utf-8"/> <style type="text/css&qu

一个标签的72变，打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,求star!) 关于改造,一开始的想法就是使用百分比尺寸来改造,然