programing tip

CSS를 사용하여 모서리 자르기

itbloger 2021. 1. 9. 09:33
반응형

CSS를 사용하여 모서리 자르기

페이지의 모서리를 아래로 접은 것처럼 div의 왼쪽 상단 모서리를 "절단"하려고합니다.

순수 CSS로하고 싶은데 방법이 있나요?

상위 요소에 단색 배경이있는 경우 의사 요소를 사용하여 효과를 만들 수 있습니다.

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid red;
    width: 0;
}

http://jsfiddle.net/2bZAW/

추신 곧 곧border-corner-shape 당신이 찾고있는 것입니다. 안타깝게도 사양에서 벗어날 수 있으며 야생의 어떤 브라우저에도 적용되지 않을 수 있습니다.

투명한 컷 아웃 가장자리 가 필요한 경우 회전 된 유사 요소를의 배경으로 사용 div하고 원하는 모서리를 잘라내도록 배치 할 수 있습니다.

div의 Transprent 컷 아웃 가장자리

body {
  background: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}
div {
  position: relative;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}
div:after {
  content: '';
  position: absolute;
  width: 1100%; height: 1100%;
  top: 20px; right: -500%;
  background: rgba(255,255,255,.8);
  transform-origin: 54% 0;
  transform: rotate(45deg);
  z-index: -1;
}
<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

이 솔루션은 변환을 사용하며 필요한 공급 업체 접두사를 추가해야합니다. 자세한 내용은 canIuse를 참조하십시오 .

오른쪽 하단 가장자리 를 자르 려면 유사 요소의 top, transform 및 transform-origin 속성을 다음과 같이 변경할 수 있습니다.

body {
  background: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}
div {
  position: relative;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}
div:after {
  content: '';
  position: absolute;
  width: 1100%; height: 1100%;
  bottom: 20px; right: -500%;
  background: rgba(255,255,255,.8);
  transform-origin: 54% 100%;
  transform: rotate(-45deg);
  z-index: -1;
}
<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

CSS 클립 경로

사용하여 클립 경로 것은 위로, 새로운 오는 대안입니다. 점점 더 많은 지원을 받기 시작했으며 이제는 잘 문서화되고 있습니다. SVG를 사용하여 모양을 만들기 때문에 즉시 반응합니다.

div {
  width: 200px;
  min-height: 200px;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  background: lightblue;
}
<div>
  <p>Some Text</p>
</div>

CSS 변환

web-tiki의 변형 답변에 대한 대안이 있습니다.

body {
  background: lightgreen;
}
div {
  width: 200px;
  height: 200px;
  background: transparent;
  position: relative;
  overflow: hidden;
}
div.bg {
  width: 200%;
  height: 200%;
  background: lightblue;
  position: absolute;
  top: 0;
  left: -75%;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  z-index: -1;
}
<div>
  <div class="bg"></div>
  <p>Some Text</p>
</div>

다음은 CSS transform: skew(45deg)를 사용하여 컷 코너 효과를 생성하는 또 다른 방법 입니다. 모양 자체에는 다음과 같이 세 가지 요소 (실수 요소 1 개 및 유사 요소 2 개)가 포함됩니다.

  • 기본 컨테이너 div요소에는 overflow: hidden왼쪽 테두리 가 있으며 생성됩니다.
  • :before20 % 부모 컨테이너의 높이 및 경사가 적용된 변환 갖는 가상 요소. 이 요소는 상단의 테두리와 오른쪽의 컷 (경사) 테두리를 표시합니다.
  • :after80 % 모 (기본적으로, 나머지 높이)의 높이와 바닥 테두리 생성 가상 요소, 우측 경계의 나머지 부분.

생성 된 출력은 반응 형이며 상단에 투명한 컷을 생성하고 투명한 배경을 지원합니다.

div {
  position: relative;
  height: 100px;
  width: 200px;
  border-left: 2px solid beige;
  overflow: hidden;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: calc(100% - 2px);
  left: 0px;
  z-index: -1;
}
div:before {
  height: 20%;
  top: 0px;
  border: 2px solid beige;
  border-width: 2px 3px 0px 0px;
  transform: skew(45deg);
  transform-origin: right bottom;
}
div:after {
  height: calc(80% - 4px);
  bottom: 0px;
  border: 2px solid beige;
  border-width: 0px 2px 2px 0px;
}
.filled:before, .filled:after {
  background-color: beige;
}

/* Just for demo */

div {
  float: left;
  color: beige;
  padding: 10px;
  transition: all 1s;
  margin: 10px;
}
div:hover {
  height: 200px;
  width: 300px;
}
div.filled{
  color: black;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

여기에 이미지 설명 입력

아래는 linear-gradient배경 이미지 를 사용하여 코너 컷 효과를 만드는 또 다른 방법 입니다. 3 개의 그래디언트 이미지 조합 (아래 참조)이 사용됩니다.

  • 모서리를 자르는 효과를 생성하는 하나의 선형 그래디언트 (왼쪽 아래로 기울임). 이 그래디언트의 크기는 고정 25px x 25px입니다.
  • 컷 효과를 일으키는 삼각형 왼쪽에 단색을 제공하는 하나의 선형 그래디언트입니다. 그래디언트는 이미지 나 그래디언트를 사용할 때만 배경의 크기, 위치를 제어 할 수 있기 때문에 단색을 생성하더라도 사용됩니다. 이 그래디언트는 X 축에서 -25px에 위치합니다 (기본적으로 컷이있는 위치보다 먼저 종료됨을 의미 함).
  • 위와 유사한 또 다른 그래디언트는 다시 단색을 생성하지만 Y 축에서 아래로 25px에 위치합니다 (다시 잘라낸 영역을 제외 함).

생성 된 출력은 반응 형이며 투명한 컷을 생성하며 추가 요소 (실제 또는 의사)가 필요하지 않습니다. 단점은이 방법이 배경 (채우기)이 단색이고 테두리를 생성하기가 매우 어려운 경우에만 작동한다는 것입니다 (스 니펫에서 볼 수 있듯이 여전히 가능함).

.cut-corner {
  height: 100px;
  width: 200px;
  background-image: linear-gradient(to bottom left, transparent 50%, beige 50%), linear-gradient(beige, beige), linear-gradient(beige, beige);
  background-size: 25px 25px, 100% 100%, 100% 100%;
  background-position: 100% 0%, -25px 0%, 100% 25px;
  background-repeat: no-repeat;
}
.filled {
  background-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(to bottom left, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), beige calc(50% + 1px)), linear-gradient(beige, beige), linear-gradient(beige, beige);
  background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}

/* Just for demo */

*{
  box-sizing: border-box;
  }
div {
  float: left;
  color: black;
  padding: 10px;
  transition: all 1s;
  margin: 10px;
}
div:hover {
  height: 200px;
  width: 300px;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

여기에 이미지 설명 입력

사용할 수 있습니다 linear-gradient. 부모 div에게 배경 이미지 div가 있고 그 위에 회색 배경과 개 귀가 달린 왼쪽 모서리 가있는 이미지가 필요 하다고 가정 해 보겠습니다 . 다음과 같이 할 수 있습니다.

.parent-div { background: url('/image.jpg'); }
.child-div { 
   background: #333;
   background: linear-gradient(135deg, transparent 30px, #333 0);
}

CodePen에서보기

추가 읽기 :

대각선 모서리 대신 대각선 테두리가 필요한 경우 각 유사 요소로 2 개 div를 쌓을 수 있습니다.

데모

http://codepen.io/remcokalf/pen/BNxLMJ

.container {
  padding: 100px 200px;
  overflow: hidden;
}

div.diagonal {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  float: left;
}

div.diagonal2 {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  background: #da1d00 url(http://www.remcokalf.nl/background.jpg) left top;
  background-size: cover;
  float: left;
}

div.diagonal3 {
  background: #da1d00;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 432px;
  height: 432px;
  padding: 4px;
  position: relative;
  margin: 30px;
  float: left;
}

div.inside {
  background: #fff;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 292px;
  height: 292px;
  padding: 70px;
  position: relative;
}

div.diagonal:before,
div.diagonal2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid transparent;
  width: 0;
}

div.diagonal3:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #da1d00;
  border-right: 80px solid transparent;
  width: 0;
  z-index: 1;
}

div.inside:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  border-top: 74px solid #fff;
  border-right: 74px solid transparent;
  width: 0;
  z-index: 2;
}

h2 {
  font-size: 30px;
  line-height: 1.3em;
  margin-bottom: 1em;
  position: relative;
  z-index: 1000;
}

p {
  font-size: 16px;
  line-height: 1.6em;
  margin-bottom: 1.8em;
}

#grey {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

#grey:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;
  width: 400px;
}
<div id="grey"></div>
<div class="container">
  <div class="diagonal">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner is possible</p>
  </div>
  <div class="diagonal2">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner with background image is possible</p>
  </div>
  <div class="diagonal3">
    <div class="inside">
      <h2>Header title</h2>
      <p>Yes a CSS diagonal border is even possible with an extra div</p>
    </div>
  </div>
</div>

이 코드를 사용하면 직사각형의 각면에서 모서리를자를 수 있습니다.

div {
  display:block;
  height: 300px;
  width: 200px;
  background: url('http://lorempixel.com/180/290/') no-repeat;
  background-size:cover;

  -webkit-clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

http://jsfiddle.net/2bZAW/5552/

여기에 이미지 설명 입력

Joseph의 코드를 약간 수정하면 요소에 단색 배경이 필요하지 않습니다.

div {
    height: 300px;
    background: url('http://images2.layoutsparks.com/1/190037/serene-nature-scenery-blue.jpg');
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid rgba(0,0,0,0);
    width: 0;
}

http://jsfiddle.net/2bZAW/1921/

' rgba (0,0,0,0) '을 사용하면 내부 '코너'가 보이지 않게됩니다.

4 번째 매개 변수 'a'( 0 <a <1 )를 편집하여 더 많은 '접힌 모서리'효과를위한 그림자를 가질 수도 있습니다.

http://jsfiddle.net/2bZAW/1922/ (그림자 포함)

참고 : RGBA 색상 값은 IE9 +, Firefox 3+, Chrome, Safari 및 Opera 10+에서 지원됩니다.

잘라낸 요소에 대해 배경색이 다른 문제가있었습니다. 그리고 우리는 오른쪽 상단과 왼쪽 하단 모서리만을 원했습니다.

여기에 이미지 설명 입력

body {
 background-color: rgba(0,0,0,0.3)
 
}

.box {
 position: relative;
 display: block;
 background: blue;
 text-align: center;
 color: white;
 padding: 15px;
 margin: 50px;
}

.box:before,
.box:after {
 content: "";
 position: absolute;
 left: 0; 
 right: 0;
 bottom: 100%;
 border-bottom: 15px solid blue;
 border-left: 15px solid transparent;
 border-right: 15px solid transparent;
}

.box:before{
	border-left: 15px solid blue;
}

.box:after{
	border-right: 15px solid blue;
}

.box:after {
 bottom: auto;
 top: 100%;
 border-bottom: none;
 border-top: 15px solid blue;
}


/* Active box */
.box.active{
	background: white;
	color: black;
}



.active:before,
.active:after {
 border-bottom: 15px solid white;
}

.active:before{
	border-left: 15px solid white;
}

.active:after{
	border-right: 15px solid white;
}

.active:after {
 border-bottom: none;
 border-top: 15px solid white;
}
<div class="box">
 Some text goes here. Some text goes here. Some text goes here. Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>
</div>
<div class="box">
 Some text goes here.
</div>
<div class="box active">
 Some text goes here.
 <span class="border-bottom"></span>
</div>
<div class="box">
 Some text goes here.
</div>

Harry의 선형 그라데이션 솔루션 (2015 년 10 월 14 일 9:55에 답변 됨)에 따르면 불투명도 배경이 불가능하다고 말합니다. 시도해 보았지만 그렇지 않습니다.

그러나! 해결 방법을 찾았습니다. 아니요, 매우 최적화되어 있지는 않지만 작동했습니다. 그래서 여기 내 해결책이 있습니다. Harry는 가상 요소를 사용하지 않기 때문에 하나를 생성하여이를 달성 할 수 있습니다.

컨테이너를 기준으로 위치를 설정하고 동일한 선형 그라데이션 속성을 가진 유사 요소를 만듭니다. 즉, 복제하십시오. 그런 다음 컨테이너에 투명한 배경을 넣고 복제본에 대해 검정색 배경을 지정합니다. 그 위에 절대 위치, -1의 Z- 색인 및 불투명도 값 (예 : 50 %)을 입력합니다. 그것은 일을 할 것입니다. 다시 한 번 해결 방법이며 완벽하지는 않지만 잘 작동합니다.

.cut-corner {
    position: relative;
    color: white;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
    background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
    background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}
.cut-corner:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: -1;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), black calc(50% + 1px)), linear-gradient(black, black), linear-gradient(black, black);
    background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
    background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}

/* Just for demo */

div {
  padding: 10px;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">
  Some content<br>
  Some content<br>
  Some content<br>
  Some content  
</div>

Joshep의 코드를 약간 수정하여 ... 요구 사항에 따라 오른쪽 모서리가 접힌 것처럼 보이는이 코드를 사용할 수 있습니다.

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid blue;
    width: 0;
}

나는 최근에 오른쪽 상단 모서리를 잘라내어 폴더처럼 탭을 오버레이했습니다. 완전한 코드 멍청한 코드는 무시하고 정사각형, 삼각형, 직사각형을 결합하여이 작업을 수행했습니다 ... 이것은 새로운 접근 방식 일 수도 있고 아닐 수도 있지만 누군가가 도움이되기를 바랍니다.

https://i.stack.imgur.com/qFMRz.png

다음은 HTML입니다.

<!DOCTYPE html>
<html lang ="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css"> 
    </head>
    <body>
        <div class="folders">
            <div class="container">
                <div class="triangleOne">
                    <p class="folderNames">Home</p>
                </div>
                <div class="triangleOneCut">
                </div>
                <div class="triangleOneFill">
                </div>
            </div>

            <div class="container2">
                <div class="triangleOne blue">
                    <p class="folderNames">About</p>
                </div>
                <div class="triangleOneCut blueCut">
                </div>
                <div class="triangleOneFill blue">
                </div>
            </div>

            <div class="container3">
                <div class="triangleOne green">
                    <p class="folderNames">Contact</p>
                </div>
                <div class="triangleOneCut greenCut">
                </div>
                <div class="triangleOneFill green">
                </div>
            </div>
        </div>
    </body>
</html>

다음은 CSS입니다.

.triangleOne {
    height: 50px;
    width: 40px;
    background: red;
    border-radius: 5px 0px 0px 5px;
    position: absolute;
}

.triangleOneCut {
    content: '';
    position: absolute;
    top: 0; left: 40px;
    border-top: 10px solid transparent;
    border-left: 10px solid red;
    width: 0;
}

.triangleOneFill {
    content: '';
    position: absolute;
    top: 10px; left: 40px;
    width: 10px;
    height: 40px;
    background-color: red;
    border-radius: 0px 0px 5px 0px;
}

.container {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    z-index: 3;
}

.container2 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -10px;
    z-index: 2;
}

.container3 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -20px;
    z-index: 1;
}

.blue {
    background-color: blue;
}

.green {
    background-color: green;
}

.blueCut {
    border-left: 10px solid blue;
}

.greenCut {
    border-left: 10px solid green;
}

.folders {
    width: 160px;
    height: 50px;
    /* border: 10px solid white; */
    margin: auto;
    padding-left: 25px;
    margin-top: 100px;
}

.folderNames {
    text-align: right;
    padding-left: 2px;
    color: white;
    margin-top: 1.5px;
    font-family: monospace;
    font-size: 6.5px;
    border-bottom: double 1.5px white;
}

또 다른 해결책 : html :

<div class="background">
  <div class="container">Hello world!</div>
</div>

css :

.background {
  position: relative;
  width: 50px;
  height: 50px;
  border-right: 150px solid lightgreen;
  border-bottom: 150px solid lightgreen;
  border-radius: 10px;
}
.background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 25px solid lightgreen;
  border-top-color: transparent;
  border-left-color: transparent;
}
.container {
  position: absolute;
  padding-left: 25px;
  padding-top: 25px;
  font-size: 38px;
  font-weight: bolder;
}

https://codepen.io/eggofevil/pen/KYaMjV

참조 URL : https://stackoverflow.com/questions/7324722/cut-corners-using-css

반응형

'programing tip' 카테고리의 다른 글

헤더가 그대로있는 Python을 사용하여 CSV 파일을 가져 오는 방법 (첫 번째 열이 숫자가 아닌 열임)  (0) 2021.01.09
다시 입력하지 않고 data.frame () 내에서 열 이동  (0) 2021.01.09
웹팩을 사용하는 여러 HTML 파일  (0) 2021.01.08
Visual Studio에서 특정 줄 번호로 파일 열기  (0) 2021.01.08
MySQL "CREATE TABLE IF NOT EXISTS"-&gt; 오류 1050  (0) 2021.01.08

'programing tip'의 다른글

  • 현재글CSS를 사용하여 모서리 자르기

관련글

댓글

티스토리툴바