CSS实现心形、六角星、六边形、平行四边形等几何

本文将利用border属性实现简单几何的绘制;

效果图:

正八角星
说明:采用两个正方形以中心进行旋转叠加;

/* 八角星 */
    #burst-8 {
        background: #6376ff1f;
        width: 80px;
        height: 80px;
        position: relative;
        text-align: center;
        transform: rotate(20deg);
    }

    #burst-8:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 80px;
        background: #6376ff1f;
        transform: rotate(135deg);
    }

  

正六边形
说明:将长方形,与两个三角形拼接;

 /* 正六边形 */
    #hexagon {
        width: 100px;
        height: 55px;
        background: #6376ff1f;
        position: relative;
        top: 25px;
    }

    #hexagon:before {
        content: "";
        position: absolute;
        top: -25px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid #6376ff1f;
    }

    #hexagon:after {
        content: "";
        position: absolute;
        bottom: -25px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid #6376ff1f;
    }

  

平行四边形
说明:采用矩形skew倾斜的方式;

#ping {
        height: 50px;
        width: 100px;
        transform: skew(20deg);
        background: #6376ff1f;
    }

  

椭圆
说明:采用矩形border-radius的方式;

#tuoyuan {
        height: 50px;
        width: 100px;
        border-radius: 50%;
        background: #6376ff1f;
    }

  

心形
说明:将正方形旋转45度,与两个直径和其半径相同的半圆进行旋转、平移、拼接;

/* 心形 */
    #heart {
        height: 50px;
        width: 50px;
        background: #6376ff1f;
        transform: rotate(45deg);
    }

    #heart:before {
        position: absolute;
        content: "";
        left: -25px;
        top: 0px;
        width: 50px;
        height: 25px;
        transform: rotate(-90deg);
        background: #6376ff1f;
        transform-origin: bottom;
        border-radius: 50px 50px 0 0;
    }

    #heart:after {
        position: absolute;
        content: "";
        left: 0px;
        top: -25px;
        width: 50px;
        height: 25px;
        background: #6376ff1f;
        border-radius: 50px 50px 0 0;
    }

  

六角星
说明:采用两个等腰三角形进行叠加;

/* 六角星 */
    #star-six {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #6376ff1f;
        position: relative;
    }
    #star-six:after {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #6376ff1f;
        position: absolute;
        content: "";
        top: 30px;
        left: -50px;
    }

  

原文地址:https://www.cnblogs.com/giserjobs/p/12018372.html

时间: 2024-10-14 06:36:05

CSS实现心形、六角星、六边形、平行四边形等几何的相关文章

CSS3画五角星和六角星

最终想要实现的效果 一.五角星 在画五角星之前首先分析这个五角星是如何实现,由哪几个部分构成的,示意图如下: 三个顶角向上的三角形,通过设置旋转和定位相互重叠和拼接实现最终的五角星效果. 为了语义化和代码更加简便,所以使用伪类来添加内容. 1.设置一个等腰三角形,并使用transform将其旋转到合适的角度   transform: rotate(35deg); .star{ width:0px;height:0px; border-bottom:70px solid rgba(244,0,0,

六角星

打开Python语言的IDLE软件脚本.          2.单击“file”-“new file”,建立脚本          3.编写代码  4.单击“file”-“save”,保存脚本 5.回到脚本编辑页,单击“run”-“run module”,运行脚本,结果如图 原文地址:https://www.cnblogs.com/lsy02580852/p/10527451.html

python绘制5角形,6角星方法

五角星 #五角星 from turtle import * fillcolor("red") begin_fill() while True: forward(200) right(144) if abs(pos()) < 1: break end_fill() 六角星 1 from turtle import * 2 fillcolor("red") 3 begin_fill() 4 while True: 5 forward(100) 6 right(-6

Python绘制五角星等能一笔画出的角星

只有奇数和4的整数倍的角星才能一笔画出,见程序和注释: import math import turtle as t #这种方法只能画只在尖角处转向就可以画出的角星,\ # 即可以用等长线段(线段长度为不转弯的最大)不提笔画完的角星\ #如注释吊28,29行,则偶数角数变为原来2倍,证明此方法只能画奇数和4的整数倍的角星\ #即只有奇数和4的整数倍的角星才能一笔画出 def loop(r,n): t.fd(ol(r,n)) t.right(180-360/(2*n)) def ol(r,n):

2014年度辛星css教程夏季版第六节

这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行,始于足下,我们开始吧. ************显示方式************* 1.有时候我们会设置一个元素的显示方式,比如我们在做导航条的时候,就会使用display:inline来使它们成为内联的样式. 2.下面先不说这个display,先说一下visibility属性把,它可以设置为hid

CSS实现跳动的心形图案?

原理: 1. 创建1个div <div class="heart"></div> .heart { position:relative; width: 100px; height: 100px; margin: 100px auto; background-color: tomato; } 2. 用伪元素:before和:after,画出一个粉色的圆和一个黄色的圆,并将圆心分别定位在正方形的左边和上边. 注意: 设置:before和:after时必须设置其con

超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 <canvas> 元素. 贴士:全部例子都分享在我的 GayHub - https://github.com/bxm0927/canvas-special 尤雨溪个人主页炫彩三角纽带效果,点击还可变换 GitHub源码 . Demo演示 知乎登录注册页动态离子背景效果 GitHub源码 . Demo演

[deviceone开发]-心形点赞动画示例

一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效果图 三.相关下载 https://github.com/do-project/code4do/tree/master/my_heart四.相关讨论 http://bbs.deviceone.net/forum.php?mod=viewthread&tid=308五.更多案例http://source

css3实现三角形,聊天背景气泡,心形等形状

1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px; } #talkbubble:before { content:""; position: absolute; right: 100%; top: 26