css画心形原理,css画心形、三角形的总结

.heart {

width: 10px;

height: 10px;

/* position: fixed; */

background: #fff;

transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

display: inline-block;

}

.heart:after,.heart:before {

content: '';

width: inherit;

height: inherit;

background: inherit;

border-radius: 50%;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

position: absolute;

}

.heart:after {

top: -5px;

left: 0px;

}

.heart:before {

left: -5px;

}

话不多说，直接上代码，因为很好理解。以上是心形，以下是三角形。

/* 等边三角形，底边平行：*/

border-right: 100px solid transparent;

border-bottom: 173.2px solid #17ad17;

border-left: 100px solid transparent;

/* 直角三角形，底边平行：*/

border-width: 0 40px 40px;

border-style: solid;

border-color: transparent transparent blue;

1.心形

一直以来，有各种用css画心角形也好，其他组合图形也好，对勾或叉叉也好，他们的思路是基本一致的。那就是，使用transform旋转，再结合伪元素来实现。

像本例中，就是使用一个正方形旋转40度做心形的下角，然后使用两个伪元素画成圆圈，再结合绝对定位，并继承正方形的宽高以实现等大来实现组成心形。

2.三角形

三角形的实现方法更简单，只有一个border属性即可。border结合透明，进而实现三角形的形状。其中，关于三角形的边上下平行还是左右还是别的方向，可以通过变换设置上下左右四个border实现，也可以旋转父元素实现。

三角形扩展：

2.1.带边框三角形

原理就是使用伪元素再画一个稍小一点点的三角形，然后使用绝对定位使其重心重合即可。

2.2.三角形箭头

原理同上，只是最后不是重心重合，而是一边重合。

CSS画心形和蛋形

一.心形 使用transform-origin属性实现设置不同的点为原点 1.改变元素基点transform-origin(transform-origin是变形原点,原点就是元素绕着旋转或变形的点) ...

用css画出三角形

看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

用纯css画个三角形

用纯css画个三角形以下是源代码: oslyn") for the ...

Machine Learning for hackers读书笔记(三)分类：垃圾邮件过滤

#定义函数,打开每一个文件,找到空行,将空行后的文本返回为一个字符串向量,该向量只有一个元素,就是空行之后的所有文本拼接之后的字符串 #很多邮件都包含了非ASCII字符,因此设为latin1就可以读取 ...

ZOJ 1016 Parencodings

原题链接 题目大意:有两串数字P和W.数组P中,数字P[i]表示第i个右括号之前的左括号个数.数组W中,数字W[i]表示在第i个右括号和与它匹配的左括号之间的右括号的个数(包括本身).给出一个数组P, ...

CentOS 7安装iptables服务，以及常用命令

之前使用的是CentOS6.5,并且学艺不精,用啥查啥,用完就忘.并且网上大部分资料是基于CentOS7之前的版本. 在CentOS7中,默认的防火墙不是iptables,而是firewalld.而且 ...

php获取post中的json数据的实现方法

最近用到腾讯微博与PHP交互,腾讯把json数据post给PHP(腾讯推送数据时,每条数据是一个json格式的数据包,作为post的数据体(请注意post数据体没有参数,不是key=value形式,整 ...

UVA 11389 The Bus Driver Problem

题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82842#problem/D In a city there are n bus ...

【SSH三框架】Hibernate基金会七：许多附属业务

相对于上述一关系,在这里,下一个一对多关系说明. 另外,在上述.我们描述了许多人描述的一一对应关系.在关系数据库是多对一的关系.但也有许多关系. 但,只知道它是不够的,Hibernate它是一种面向对 ...

python实现算24的算法

1.介绍 给定4个整数,数字范围在1-13之间,任意使用 + - * / ( ) ,构造出一个表达式,使得最终结果为24,这就是常见的算24的游戏.本文介绍用Python语言实现的两种方式.2.实现思 ...

如何将自己写的verilog模块封装成IP核

如何将自己写的verilog模块封装成IP核 (2014-11-21 14:53:29) 转载▼ 标签: 财经 分类: 我的东东 =======================第一篇========= ...

JS模块化写法(转)

一.原始写法 模块就是实现特定功能的一组方法. 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. function m1(){ //... } function m2(){ // ...