使用border-radius画出圆形、半圆、鸡蛋和爱心

最近学习了一下border-radius属性，试着自己使用这个属性画一下常见图形，效果如下：

一、圆形

画出圆心就很简单，设置为50%即可,代码如下：

.circular1 {width: 150px;height: 150px;background-color: #00A2FF;border-radius: 50%;}

二、半圆

半圆我想出两种方法，一种画出两个四分之一圆进行拼接，第二种是将下半部分裁剪，代码如下：

      /* 半圆的第一种方法 */.half-circular1 {width: 75px;height: 75px;background-color: #00A2FF;border-radius: 0px 100% 0px 0px;}.half-circular2 {width: 75px;height: 75px;background-color: #00A2FF;border-radius: 0px 0px 100% 0px;}/* 半圆的第二种方法 */#c {width: 150px;height: 75px;border: 1px red solid;overflow: hidden;float: left;margin-right: 10px}.half-circular3 {width: 150px;height: 150px;background-color: #00A2FF;border-radius: 50%;}

三、鸡蛋

这个需要对水平方向和垂直方向进行操作，两组值由/分隔，代码如下：

        .egg {width: 100px;height: 150px;background-color: #00A2FF;border-radius: 100% 100% 100% 100%/180px 180px 100px 100px;}

四：爱心

先做出上面是圆形，下方是长方形的拱门，再进行旋转即可得到，代码如下：

        .heart::before {content: "";position: absolute;left: 20px;width: 70px;height: 115px;background: red;border-radius: 50px 50px 0 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transform-origin: left bottombottom;-moz-transform-origin: left bottombottom;-o-transform-origin: left bottombottom;transform-origin: left bottombottom;}.heart::after {content: "";position: absolute;left: 53px;width: 70px;height: 115px;background: red;border-radius: 50px 50px 0 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-transform-origin: rightright bottombottom;-moz-transform-origin: rightright bottombottom;-o-transform-origin: rightright bottombottom;transform-origin: rightright bottombottom;}

使用border-radius画出圆形、半圆、鸡蛋和爱心相关推荐

用php画一个蓝底红色的圆_PHP 画出透明背景的圆形图片程序
PHP 想要用 GD 来画出圆形.椭圆形等等的图形,该怎么画呢?背景想要是透明的,要怎么做呢? PHP 画出透明背景的圆形图片程序这边来示范下述: 图片画出圆形和椭圆形画两个不同的圆 ...
前端怎么画三角形_css画出三角形和梯形
用CSS画三角形我们都知道在html中,想要画出圆形,椭圆,矩形,都很简单,但是常见的三角形,梯形如何用纯css画出却较麻烦,许多时候都是直接用三角形的图片.本文将介绍如何用纯css画出三角形和 ...
用CSS画圆、半圆、线性箭头
一.css画半圆 border-radius 可以设置盒子四边的弧度.可以设置%,px等单位. 在css中利用border-radius可以画出圆形,半圆,等图案半圆需要两个块元素,两个块元素分别设 ...
在画图软件中，可以画出不同大小或颜色的圆形、矩形等几何图形。几何图形之间有许多共同的特征，如它们可以是用某种颜色画出来的，可以是填充的或者不填充的。此外还有些不同的特征，比如，圆形都有半径，可以根据半
代码 import org.w3c.dom.ls.LSOutput;/*在画图软件中,可以画出不同大小或颜色的圆形.矩形等几何图形.几何图形之间有许多共同的特征,如它们可以是用某种颜色画出来的,可以是 ...
给轮廓画出矩形和圆形边界
OpenCV支持大量的轮廓.边缘.边界的相关函数,相应的函数有moments.HuMoments.findContours.drawContours.approxPolyDP.arcLength.bo ...
【学习OpenCV】给轮廓画出矩形和圆形边界
OpenCV支持大量的轮廓.边缘.边界的相关函数,相应的函数有moments.HuMoments.findContours.drawContours.approxPolyDP.arcLength.bo ...
[css] 不使用border画出1px高的线，在不同浏览器的标准和怪异模式下都能保持效果一样
[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 <div style="width: 100%;height: 1px;"&g ...
css画钟表_如何使用css3绘制出圆形动态时钟
使用css3绘制出圆形动态时钟的原理众所周知的是div形状是方形的,那么我们首先需要使用border-radius属性将其变换成圆形. 为了使指针转动起来,我们需要使用-webkit-transfo ...
用java的事件监听机制实现一个简单的画板应用：通过选择图形按钮和颜色按钮来画出自己想画的图形：直线、空心矩形、圆形、折线、多边形、圆角矩形、弧线、曲线、喷枪
今天做一个简单的画板,完整代码附在文章末尾处. - 功能:通过选择图形按钮和颜色按钮来画出自己想画的图形. - 界面展示: - 思路: 1.做一个可视化界面:创建JFrame对象,并设置Title.S ...
Codeblocks 利用GLUT 画出矩形，直线，三角形，圆形图案并实现翻转，镜像，变色放大缩小等功能
实验要求:开发一个画图程序,用户可以用鼠标绘制线段.矩形.圆和三角形等.通过菜单让用户选择需要绘制的图元. 注意:一定要加上<windows.h>库否则无法通过编译 #include &l ...

使用border-radius画出圆形、半圆、鸡蛋和爱心

使用border-radius画出圆形、半圆、鸡蛋和爱心相关推荐

最新文章

热门文章