[求助] 急需 css样式画心形图案

yun_feiyang 2015-02-10 09:16:54

现有一个css样式画的心形图案,无耐改了半天最终效果不理想,改大后比例不对,不像心形了,小弟在此谢过了
最好css 样式有注释,越详细越好.

现急需改成大的心形图案(1000*700)



<!DOCTYPE html 

<html >

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style>

.center {

		margin: 0 auto;

		padding-top: 9px;

		width: 500px;

		text-align: center;

}



.heart {

	position: relative;

	width: 100px;

	height: 90px;

	display: inline-block;

}

.heart:before,

.heart:after {

	position: absolute;

	content: "";

	left: 50px;

	top: 6px;

	width: 50px;

	height: 80px;

	background: red;

	-moz-border-radius: 50px 50px 0 0;

	border-radius: 50px 50px 0 0;

	-webkit-transform: rotate(-45deg);

	   -moz-transform: rotate(-45deg);

		-ms-transform: rotate(-45deg);

		 -o-transform: rotate(-45deg);

			transform: rotate(-45deg);

	-webkit-transform-origin: 0 100%;

	   -moz-transform-origin: 0 100%;

		-ms-transform-origin: 0 100%;

		 -o-transform-origin: 0 100%;

			transform-origin: 0 100%;

	background: #450000;

		

}

.heart:after {

	left: 0;

	-webkit-transform: rotate(45deg);

	   -moz-transform: rotate(45deg);

		-ms-transform: rotate(45deg);

		 -o-transform: rotate(45deg);

			transform: rotate(45deg);

	-webkit-transform-origin: 100% 100%;

	   -moz-transform-origin: 100% 100%;

		-ms-transform-origin: 100% 100%;

		 -o-transform-origin: 100% 100%;

			transform-origin :100% 100%;

	box-shadow: 5px 0px 15px #573636;

}

.heart:before {

   box-shadow: 5px 0px 5px #746161;

}

.font{

	position: absolute;

	top: 8px;

	left: 38%;

	z-index: 56;

	color: #FFF;

	font-size: 50px;

	text-shadow: 2px 4px 3px #F00;

}

</style>

</head>

<body>

	<div class="center">

		<div class="heart"><div class="font">l</div></div>

	</div>

</body>

</html>

...全文

140 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

slwsss 2015-02-10

打赏
举报

改下数值

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
.center {
        margin: 0 auto;
        padding-top: 9px;
        width: 500px;
        text-align: center;
}
 
.heart {
    position: relative;
    width: 500px;
    height: 450px;
    display: inline-block;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 250px;
    top: 30px;
    width: 250px;
    height: 400px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 250px 250px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
    background: #450000;
         
}
.heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
    box-shadow: 5px 0px 15px #573636;
}
.heart:before {
   box-shadow: 5px 0px 5px #746161;
}
.font{
    position: absolute;
    top: 40px;
    left: 38%;
    z-index: 56;
    color: #FFF;
    font-size: 250px;
    text-shadow: 2px 4px 3px #F00;
}
</style>
</head>
<body>
    <div class="center">
        <div class="heart"><div class="font">l</div></div>
    </div>
</body>
</html>