CSS 모양 그리 기

2263 단어 css

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
마지막 코드.
<style type="text/css">

  #heart { 

  position: relative;

}

#heart:before, #heart:after {

  position: absolute;

  content: "";

  left: 70px; top: 0;

  width: 70px;

  height: 115px;

  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%;

}

#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%;

}

</style>


  
<!--
#heart {
position: relative;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
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%;
}
#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%;
}
-->

좋은 웹페이지 즐겨찾기