[CSS] 모서리 자르기

 

 

 

 

 

 

 

HTML

<h2>모서리 한개</h2>
<div class="button top-left">BUTTON</div>
<div class="button top-right">BUTTON</div>
<div class="button bottom-right">BUTTON</div>
<div class="button bottom-left">BUTTON</div>

<h2>모서리 두개</h2>
<div class="button top">BUTTON</div>
<div class="button bottom">BUTTON</div>

<h2>모서리 여러개</h2>
<div class="button topbottom">BUTTON</div>

 

CSS

body {
	background: #ddd;
}

.button {
	width: 150px;
	line-height: 40px;
	text-align: center;
	margin-bottom: 20px;
}

.top-left {
	background: linear-gradient(135deg, transparent 10px, #58a 0);
}

.top-right {
	background: linear-gradient(-135deg, transparent 10px, #58a 0);
}

.bottom-right {
	background: linear-gradient(-45deg, transparent 10px, #58a 0);
}

.bottom-left {
	background: linear-gradient(45deg, transparent 10px, #58a 0);
}


.top {
	background: linear-gradient(-135deg, transparent 10px, #58a 0) right, linear-gradient(135deg, transparent 10px, #58a 0) left;
	background-size: 50% 100%;
	background-repeat: no-repeat;
}

.bottom {
	background: linear-gradient(-45deg, transparent 10px, #58a 0) right, linear-gradient(45deg, transparent 10px, #58a 0) left;
	background-size: 50% 100%;
	background-repeat: no-repeat;
}

 

SCSS mixin

/* mixin */
@mixin beveled-corners($bg, $tl:0, $tr:$tl, $br:$tl, $bl:$tr) {
    background: linear-gradient(135deg, transparent $tl, $bg 0) top left, linear-gradient(-135deg, transparent $tr, $bg 0) top right, linear-gradient(-45deg, transparent $br, $bg 0) bottom right, linear-gradient(45deg, transparent $bl, $bg 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

.topbottom {
    @include beveled-corners(#58a, 5px);
}

 

 

 

 

 

 

---

참고 : css시크릿 책