<style type="text/css">
.triangle{
border-radius: 50%;
width: 150px;
height: 150px;
margin: 50 auto;
transform: rotate(-45deg);
position: relative;
overflow:hidden;
border-radius: 0 50% 50% 50%;
}
.triangle img{
width: 200%;
height: 200%;
transform: rotate(45deg);
position: relative;
left: -90px;
top: -24px;
}
</style>
<body>
<div class="triangle">
<img src="ganesha.jpg" />
</div>
</body>
Output :)
.triangle{
border-radius: 50%;
width: 150px;
height: 150px;
margin: 50 auto;
transform: rotate(-45deg);
position: relative;
overflow:hidden;
border-radius: 0 50% 50% 50%;
}
.triangle img{
width: 200%;
height: 200%;
transform: rotate(45deg);
position: relative;
left: -90px;
top: -24px;
}
</style>
<body>
<div class="triangle">
<img src="ganesha.jpg" />
</div>
</body>
Output :)
No comments:
Post a Comment