css 질문좀드리겠습니다.
본문
위와같이 css로 문양을 만들수 있을까요 ㅠㅠ?
답변 1
<style>
/*triangle background extra extra small*/
.triangle-bg, .triangle-bg:before, .triangle-bg:after { width: 5em; height: 5em; }
/*common triangle style*/
.triangle-bg {
overflow: hidden;
position: relative;
margin:2em auto -20px;
border-radius: 30% 20% 20% 20%;
transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
}
.triangle-bg:before, .triangle-bg:after{
position: absolute;
background: #ccc;
pointer-events: auto;
content: '';
}
.triangle-bg:before {
border-radius: 20% 20% 20% 53%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle-bg:after {
border-radius: 20% 20% 53% 20%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
skewX(-30deg) scaleY(.866) translateX(24%);
}
#base {
background: #ccc;
height: 40px;
margin: 0 auto;
position: relative;
width: 70px;
border-radius: 20px;
}
</style>
<div class="page-container">
<div class="triangle-bg"></div>
<div id="base"></div>
</div>
참고하세요.
답변을 작성하시기 전에 로그인 해주세요.
