I want to develop such a design in CSS. How to do that?
2
-
border-radius: 50% 50% 50% 0;pol– pol2017-02-12 06:18:54 +00:00Commented Feb 12, 2017 at 6:18
-
Thanks for the answer! but it looks like pointed at one side where I want to have it at bottom-center.user6220062– user62200622017-02-12 06:26:28 +00:00Commented Feb 12, 2017 at 6:26
Add a comment
|
2 Answers
The design is similar, that you want.
.tear {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 10em;
height: 10em;
border: none;
-webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: #1abc9c;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-webkit-transform: rotateX(-10.313240312354818deg) rotateY(-5.156620156177409deg) rotateZ(-32.0856365273261deg) ;
transform: rotateX(-10.313240312354818deg) rotateY(-5.156620156177409deg) rotateZ(-32.0856365273261deg) ;
}<div class="tear">Aditya</div>
To make rounded corners, use border-radius,
to rotate the element use transform: rotate(),
It's best to put that on a pseudo element, so you won't have to rotate the parent (45deg) and the child (-45deg).
.shape {
width: 150px;
height: 150px;
position: relative;
}
.shape::before {
content: "";
width: 100%; height: 100%;
position: absolute; top: 0; left: 0;
border-radius: 50% 50% 50% 0;
border: 1px solid;
background-color: green;
transform: rotate(-45deg);
}
.content {
position: relative;
z-index: 1; /* put bigger z-index than the pseudo element*/
}<div class="shape">
<div class="content"></div>
</div>