【01】CSS制作的图形

绘制五角星：

通过border绘制三角形。然后通过transfrom来旋转35度。

绘制对称的图形，最后绘制顶部的三角形即可。

元素本身，加上：before和：after。

绘制爱心：

矩形，加圆角，加旋转。

绘制倒8：

显然是：三个角是圆角。然后旋转。

绘制开心笑：

四个角圆角。然后右border-right为透明即可。

代码如下：


<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>测试</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    
    .wrap {
        position: absolute;
    }
    
    .arrow {
        position: relative;
        width: 0;
        height: 0;
        border-top: 9px solid transparent;
        border-right: 9px solid #000;
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
    }
    
    .arrow:after {
        content: "";
        position: absolute;
        border: 0 solid transparent;
        border-top: 3px solid #000;
        border-radius: 20px 0 0 0;
        top: -12px;
        left: -9px;
        width: 12px;
        height: 12px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }
    
    .star-six {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #99CC33;
        position: relative;
    }
    
    .star-six:after {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #99CC33;
        position: absolute;
        content: "";
        top: 30px;
        left: -50px;
    }
    
    .star-five {
        margin: 50px 0;
        position: relative;
        display: block;
        color: #0066CC;
        width: 0px;
        height: 0px;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #0066CC;
        border-left: 100px solid transparent;
        -moz-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
    }
    
    .star-five:before {
        border-bottom: 80px solid #0066CC;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        position: absolute;
        height: 0;
        width: 0;
        top: -45px;
        left: -65px;
        display: block;
        content: ‘‘;
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
    }
    
    .star-five:after {
        position: absolute;
        display: block;
        color: #0066CC;
        top: 3px;
        left: -105px;
        width: 0px;
        height: 0px;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #0066CC;
        border-left: 100px solid transparent;
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
        content: ‘‘;
    }
    
    .heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
    
    .heart:before,
    .heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: red;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    
    .heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }
    
    .infinity {
        position: relative;
        width: 212px;
        height: 100px;
    }
    
    .infinity:before,
    .infinity:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 60px;
        height: 60px;
        border: 20px solid #FF33CC;
        -moz-border-radius: 50px 50px 0 50px;
        border-radius: 50px 50px 0 50px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    .infinity:after {
        left: auto;
        right: 0;
        -moz-border-radius: 50px 50px 50px 0;
        border-radius: 50px 50px 50px 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    .pacman {
        width: 0px;
        height: 0px;
        border-right: 60px solid transparent;
        border-top: 60px solid #FFCC00;
        border-left: 60px solid #FFCC00;
        border-bottom: 60px solid #FFCC00;
        border-top-left-radius: 60px;
        border-top-right-radius: 60px;
        border-bottom-left-radius: 60px;
        border-bottom-right-radius: 60px;
    }
    
    .yin-yang {
        width: 96px;
        height: 48px;
        background: #fff;
        border-color: #000;
        border-style: solid;
        border-width: 2px 2px 50px 2px;
        border-radius: 100%;
        position: relative;
    }
    
    .yin-yang:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #fff;
        border: 18px solid #000;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
    
    .yin-yang:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: #000;
        border: 18px solid #fff;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
    </style>
</head>

<body>
    <div class="wrap" style="top:30px; left:40px;">
        <div class="arrow"></div>
    </div>
    <div class="wrap" style="top:20px; left:100px;">
        <div class="star-six"></div>
    </div>
    <div class="wrap" style="top:20px; left:200px;">
        <div class="star-five"></div>
    </div>
    <div class="wrap" style="top:20px; left:400px;">
        <div class="heart"></div>
    </div>
    <div class="wrap" style="top:220px; left:100px;">
        <div class="infinity"></div>
    </div>
    <div class="wrap" style="top:220px; left:400px;">
        <div class="pacman"></div>
    </div>
    <div class="wrap" style="top:340px; left:200px;">
        <div class="yin-yang"></div>
    </div>
</body>

</html>

来自为知笔记(Wiz)

附件列表

时间： 2024-11-07 19:21:39

【01】CSS制作的图形的相关文章

利用CSS制作图形效果

前言关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧以下所有内容只使用一个HTML元素.任何类型的CSS,只要它至少在一个浏览器中支持. 一. 实现一个心形 #heart { position: relative; width: 100px; height: 90px; } #heart:before{ position: absolute; content: ""; left: 5

纯CSS制作冒泡提示框

来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html 在此基础上.今天分享一篇文章给大家.假设利用CSS制作冒泡提示框. 先看2张效果图: CSS: /* 对话气泡使用方法:使用.speech-bubble和.speech-bubble-DIRECTION类 <div class="speech-bubble speech-bubble-to

DIV CSS制作网页时易犯的错误总结

CSS+DIV是网站标准(或称"WEB标准")中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位.应用应用DIV+CSS编码时很容易犯一些错误.本文列举了一些常见的错误: 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 Webjx.Com 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 网页教学

好程序员web前端学习路线分享纯css绘制各种图形

好程序员web前端学习路线分享纯css绘制各种图形,很多时候,UI设计师为了页面的好看,都会采用很多图形去做装饰,比如三角形.矩形.圆形.椭圆形.对话泡泡等,让整个页面看起来不会太单调.作为前端开发更多的时候,会采用比较快捷的实现方式就是用图片或者背景图来实现页面效果,但是有一个很大的问题就是图片可能会失真,有些情况也会发现用图片或者背景图去实现效果灵活度也不够.那么如果不用图片,用纯CSS也是可以绘制各种图形的,很多人都以为css只能写一些简单的图形,比如长方形.正方形.圆形.椭圆,其实不然,

CSS制作水平垂直居中对齐多种方式各有千秋

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足

css制作三角形，下拉框三角形

网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面首先利用css制作三角形 div { width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid green; } <div>

利用CSS制作静态网页的注意事项

利用CSS制作静态网页主要是在<head>里面使用外联CSS文件来赋予网页样式首先用div分区块,了解网页布局,脑子里面有个大概的页面布局目前学习写的几种的网页布局可以分为以下几种情况: 1.页面中间 centen ,两边留白 :直接测量 centen 内容的宽度和高度,利用 maigin:auto 让内容居中即可: 2.页面顶部 head 满页面内容 ,下面centen 居中 ,两边留白:head 宽度设为100%,中间centen 内容的宽度和高度,利用 maigin:auto 让内容

CSS制作横向导航菜单实例代码

CSS制作横向导航菜单实例代码:横向导航菜单是div css布局中最为基础的且必须要掌握额技能,对于稍有布局经验的朋友这都不是问题,但是对于初学者可能未必如此,所以这里分享一段最为基础的布局代码,希望能够给需要的朋友带来帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="ht

CSS制作照片墙

资料来源:慕课网(点击这里) 课程结束后有两个效果: 效果一:CSS制作照片墙(点击这里) 效果二:旋转出现文字效果(点击这里) 实现代码: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS实现照片墙</title> 6 <style> 7 body{bac