CSS3制作心型

  1. HTML结构

[HTML] 纯文本查看 复制代码

?

1

2

3

4

<div class="box">

<div class="left"></div>
<div class="right"></div>

</div>

  1. CSS代码

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<style type="text/css">

/*通配符选择器,清除所有标签的内外边距*/
*{
    margin: 0;
    padding: 0; 
}
/*类选择器*/
.box{
    background-color: skyblue;/*设置背景颜色为天空蓝*/
    width: 200px;/*设置宽度为200px*/
    height: 200px;/*设置高度为200px*/
    position: relative;/*设置定位方式为相对定位*/
    margin: 50px auto;/*实现元素的水平居中*/
}
/*分组选择器与后代选择器*/
.box .left,.box .right{
    width: 100px;/*设置宽度为100px*/
    height: 160px;/*设置高度160为px*/
    background-color: pink;/*设置背景颜色为粉色*/
    border-radius: 50px 50px 0 0;/*设置左上角 与右上角圆角度数为50px 左下角与右下角为0*/
    position: absolute;/*设置定位方式为绝对定位*/
    left: 0;/*设置水平坐标位置*/
    top:0;/*设置垂直坐标位置*/
}
/*后代选择器选中box元素中的left元素*/
.box .left{
    transform: rotate(-45deg);/*设置逆时针方向旋转45度*/
}
/*后代选择器选中box元素中的right元素*/
.box .right{
    transform: rotate(45deg);/*设置顺时针方向旋转45度*/
    left: 43px;/*设置水平坐标位置*/
}

</style>

  1. 效果图

更多技术资讯可关注:gzitcast

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章