简单记录
html画桃心的两种实现
第一种代码
<style>
body{
margin: 0; /* 外边距清除 */
}
.heart{
position:relative;
width: 100px;/* 宽度:200像素 */
height: 100px;/* 同理高度 */
margin: 50px auto;/* 对应 上下 左右 auto自动居中 */
background-color: #969696;/* 父盒子背景 */
}
.right{
top: 0px;
left: 0px;
position:absolute;
width: 50px;
height: 75px;
background-color: red;
border-radius: 25px 25px 0 0;/* css3圆角属性 */
transform: rotate(-45deg);/* css3变换属性 旋转(角度) */
}
.left{
top: 0px;
left: 0px;
position:absolute;
width: 50px;
height: 75px;
background-color: red;
border-radius: 25px 25px 0 0;/* css3圆角属性 从左上顺时针对应*/
transform: translateX(18px) rotate(45deg);
}
</style>
<body>
<div class="heart"> <!-- class自定义类名 盒子标签 -->
<div class="right"></div><!-- 盒子右转 -->
<div class="left"></div><!-- 盒子左转 -->
</div>
</body>
实现效果:
第二种代码
<style>
body{
margin: 0px;
}
.heart{
position: relative;
width: 100px;
background-color: gray;
height: 100px;
margin: 50px auto;
}
.heart:before,.heart:after{
content: '';
position: absolute;
top: 0px;
left: 0px;
height: 75px;
width: 50px;
background-color: red;
border-radius: 25px 25px 0 0 ;
}
.heart:before{
transform: rotate(-45deg);
}
.heart:after{
transform: translateX(18px) rotate(45deg);
}
</style>
<body>
<div class="heart"></div>
</body>
实现效果一样的
简单来看:代码更加量少了,性能优化