精彩分享
CSS画基本图形，图形包括基本的矩形、圆形、 椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性。
------------------------------------------------------------------------------------------------------------------------------------
/*正方形*/
.square{ width:100px; height:100px; background:red;}
效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*长方形*/
.rectangle{ width:200px; height:100px; background:red;}
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*圆形*/
.circle{ width:100px; height:100px; background:red; border-radius:50%;}
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*椭圆*/
.oval{ width:200px; height:100px; background:red; border-radius:200px/100px;}
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*上三角*/
.triangle-up{ width:0px; height:0px; border-left:50px solid transparent;
border-right:50px solid transparent; border-bottom:100px solid red;}
效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*下三角*/
.triangle-down{ width:0px; height:0px; border-left:50px solid transparent;
border-right:50px solid transparent; border-top:100px solid red;}
效果图：
-------------------------------------------------------------------------------------------------------------------------------------
/*左三角*/
.triangle-left{ width:0px; height:0px; border-top:50px solid transparent;
border-right:100px solid red; border-bottom:50px solid transparent;}
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*右三角*/
.triangle-right{ width:0px; height:0px; border-top:50px solid transparent;
border-left:100px solid red; border-bottom:50px solid transparent;}
效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*左上三角*/
.triangle-topleft{ width:0px; height:0px; border-top:100px solid red;
border-right:100px solid transparent;}
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*右上三角*/
.triangle-topright{ width:0px; height:0px; border-top:100px solid red;
border-left:100px solid transparent;}
效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*左下三角*/
.triangle-bottomleft{ width:0px; height:0px; border-bottom:100px solid red;
border-right: 100px solid transparent;}
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*右下三角*/
.triangle-bottomright{ width:0px; height:0px; border-bottom:100px solid red;
border-left: 100px solid transparent;}
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*平行四边形*/
.parallelogram{ width:150px; height:100px; margin-left:20px; -webkit-transform:
skew(20deg); -moz-transform:skew(20deg); -moz-transform:skew(20deg); -o-transform:
skew(20deg); background:red;}
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*梯形*/
.trapezoid{ border-bottom: 100px solid red; border-left:50px solid transparent;
border-right:50px solid transparent; height:0px; width:100px;}
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*六角形*/
.star-six{ width:0px; height:0px; border-left:50px solid transparent;
border-right:50px solid transparent; border-bottom: 100px solid red;
position: relative; }
.star-six:after { width:0px; height:0px; border-left:50px solid transparent;
border-right:50px solid transparent; border-top:100px solid red; position:absolute;
content: ""; top: 30px; left: -50px;}
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*五角星*/
.star-five{ margin:50px 0px; position:relative; display:block; color:red; width:0px;
height: 0px; border-right:100px solid transparent; border-bottom:70px solid red;
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 red; border-left:30px solid transparent;
border-right:30px solid transparent; position:absolute; height:0px; width:0px; 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:red; top:3px; left: -105px;
width:0px; height:0px; border-right:100px solid transparent; border-bottom: 70px solid red;
border-left:100px solid transparent; -webkit-transform:rotate(-70deg); -moz-transform:
rotate(-70deg); -ms-transform:rotate(-70deg); -o-transform:rotate(-70deg);content: ''; }
效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*五角大楼*/
.pentagon{ position:relative; width:54px; border-width:50px 18px 0px;border-style:solid;
border-color:red transparent; }
.pentagon:before { content: ""; position:absolute; height:0px; width:0px; top: -85px; left:
-18px; border-width:0px 45px 35px; border-style:solid; border-color:transparent transparent
red;}
效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*六边形*/
.hexagon{ width:100px; height:55px; background:red; position:relative; }
.hexagon:before { content:""; position:absolute; top:-25px; left:0px; width:0px;
height:0px; border-left:50px solid transparent; border-right:50px solid transparent;
border-bottom: 25px solid red; }
.hexagon:after { content:""; position:absolute; bottom:-25px; left:0px; width: 0px;
height:0px; border-left:50px solid transparent; border-right:50px solid transparent;
border-top:25px solid red;}
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*八角形*/
.octagon { width:100px; height:100px; background:red; position:relative; }
.octagon:before { content:""; position:absolute; top:0px; left:0px; border-bottom:
29px solid red; border-left:29px solid #eee; border-right:29px solid #eee; width:42px;
height:0px; }
.octagon:after { content:""; position:absolute; bottom:0px; left:0px; border-top: 29px
solid red; border-left:29px solid #eee; border-right:29px solid #eee; width:42px;
height:0px; }
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*爱心*/
.heart { position:relative; width:100px; height:90px; }
.heart:before, .heart:after { position:absolute; content:""; left:50px; top:0px;
width:50px;height:80px; background:red; -moz-border-radius:50px 50px 0px 0px;
border-radius: 50px 50px 0px 0px; -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 red; -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); }
效果图：
-----------------------------------------------------------------------------------------------------------------------------------
相关推荐
**CSS3基本图形** 在网页设计中，CSS3（Cascading Style Sheets Level 3）是一种强大的样式表语言，用于定义HTML或XML（包括SVG、MathML等）文档的呈现。CSS3引入了许多新的特性，其中之一就是能够用纯CSS创建各种...
对于形状的创建，CSS3引入了新的几何形状，如`rect()`、`circle()`、`ellipse()`和`polygon()`，可以直接用CSS代码创建基本图形。结合`transform`属性，可以对元素进行旋转、缩放、平移和倾斜，进一步创造出复杂的...
首先，让我们了解CSS3中的基本图形绘制工具。`border-radius`属性是创造圆形和椭圆的基础，只需设置合适的半径值，一个简单的方块就能变成各种形状的圆角。更进一步，通过设置不同边的半径，我们可以创造出复杂的不...
在现代网页设计中，CSS3的应用越来越广泛，其中CSS3的border-radius属性是一个强大的工具，它不仅可以用来创建圆角，还可以用来生成各种形状的图形，包括半圆弧线。这篇文章的核心知识点就是如何利用CSS3的border-...
以下是创建动态对勾的基本CSS代码： ```css .tick { display: inline-block; width: 20px; height: 20px; position: relative; overflow: hidden; } .tick::before, .tick::after { content: ""; position:...
在JavaScript中，绘制基本图形是Web开发中的常见需求，尤其在构建交互式用户界面或游戏时。本篇文章将深入探讨两种方法：使用HTML表格（table）和使用HTML5的Canvas API（div方式）。这两种方法都有其特点和适用场景...
这个项目旨在展示如何使用纯CSS来创建动态的图形效果，具体在这个例子中是茶杯的动画。下面将详细讲解这两个文件以及涉及到的CSS知识点。 首先，`index.html`是网页的结构文件，它定义了页面的基本元素和布局。在...
在网页上，我们通常使用SVG（可缩放矢量图形）或canvas元素来绘制这样的图形。 接下来，我们将探讨CSS3动画在其中的角色。CSS3动画允许开发者定义一组关键帧，随着时间的推移逐步改变元素的样式，从而创造出平滑、...
在现代网页设计中，CSS3已经成为了不可或缺的一部分，它提供了许多强大的功能，其中之一就是图形颜色渐变效果。本文将深入探讨如何使用CSS3来实现图形的颜色渐变，并结合JavaScript、jQuery以及HTML5来构建出丰富的...
一、CSS3基本图形绘制 1. `border-radius`属性：通过设置边框半径，我们可以创建圆形或椭圆形的图形。例如，`border-radius: 50%`可以使一个元素变为圆形。 2. `transform`属性：使用`rotate()`、`scale()`、`skew...
在CSS3中，绘制基本图形是一项非常实用的功能，它允许开发者使用纯CSS创建各种形状，如圆形、椭圆形、三角形、平行四边形、梯形、六角星以及五角星等，无需借助图像编辑软件。下面我们将详细介绍如何利用CSS3实现...
在这个项目中，HTML负责构建页面的基本结构，CSS用于美化和定义元素样式，而JavaScript则为页面增添交互性和动态效果。 首先，我们来看HTML部分。HTML（HyperText Markup Language）是网页内容的基础，通过标签来...
例如，通过设置多个内阴影和外阴影，可以模拟出3D效果，甚至可以组合出圆形、正方形等基本形状，进一步组合则能构建出更复杂的图形。 接下来，我们来看看`font-face`，这是一个允许开发者自定义字体并应用于网页的...
这个“js+jquery+css画板”项目是利用这些技术来模拟Windows系统的画板功能，虽然它可能不具备Windows画板的所有特性，但能够实现基本的绘画操作。 首先，让我们深入了解一下JavaScript画板的基本概念。JavaScript...
2. 使用CSS定义按钮的基本样式，如边框、字体、尺寸等。 3. 利用伪元素`:before`和`:after`添加额外的视觉元素。 4. 使用`@keyframes`定义动画关键帧。 5. 应用`animation`属性到按钮上，指定动画名称、持续时间、...
HTML负责构建菜单的基本结构，CSS则通过选择器选择这些元素并应用样式，包括动画效果。JavaScript可能用于处理更复杂的交互，比如点击菜单项时的响应。 学习和理解这个资源，开发者可以掌握如何创建一个既美观又...
在"JavaScript开发-CSS相关"这个标签中，虽然主要讨论的是CSS，但有时候JavaScript也可以与CSS结合，用于动态改变元素的样式，从而实现交互式图形。例如，我们可以使用JavaScript监听用户的鼠标事件，当鼠标移动到...
SVG的优势在于其图形由数学路径定义，可以通过JavaScript或者CSS进行操控，实现动态变化，如波浪的起伏动画。 CSS3的动画功能是通过`@keyframes`规则实现的。在这里，我们可以定义一个动画序列，指定在不同时间点上...
首先，我们来探讨CSS如何构建基本的几何图形。CSS通过设置`border-radius`、`transform`、`background-color`等属性来创建各种形状。以下是一些常见的CSS几何图形及其制作方法： 1. **正方形和矩形**：最基础的形状...
通过以上步骤，我们可以创建出一个基本的纯CSS3太阳系模型。当然，实际的项目可能需要更复杂的计算来确保行星间比例的准确性，以及更丰富的视觉效果。但这个基础框架提供了一个很好的起点，你可以根据需要进行扩展和...