불규칙한 박스 샘플 CSS로 표현 코딩에 참조하시기 바랍니다.
[웹코딩,웹디자인]
<html>
<head>
<title>Elliptical Shapes</title>
<style type="text/css">
p {
border: 5px solid #ee3e80;
padding: 10px;
width: 100px;
height: 100px;
display: inline-block;
margin: 20px;}
p.one {
border-top-left-radius: 80px 50px;
-moz-border-radius-top-left: 80px 50px;
-webkit-border-radius-top-left: 80px 50px;}
p.two {
border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
-moz-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;
-webkit-border-radius: 1em 4em 1em 4em / 2em 1em 2em 1em;}
p.three {
padding: 0px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;}
</style>
</head>
<body>
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
</body>
</html>
| |||||||||
'IT' 카테고리의 다른 글
| 창업지원 온라인 도우미 ‘K-스타트업’ 소개 및 최근 스타트업 성공사례 (0) | 2016.01.11 |
|---|---|
| 라운드박스 CSS 샘플 코드 (0) | 2015.12.31 |
| 자동 메일링 테스트 (0) | 2015.12.15 |
| 안드로이드 PC개발환경 구축과 SL4A로 PYTHON 가지고 놀기 (0) | 2015.09.29 |
| 핀트레스트는 어떻게 사람들의 마음을 사로잡았나?! (0) | 2015.09.14 |
댓글