구현하여 CSS를 접힌 모서리

Question

https://www.dropbox.com/s/4u6xidqdqaxjjid/1.png?dl=0

내가 블록에 같은 각도를 구현하는 데에만 SSC를 사용할 수 있습니까?

사진을 만들고 싶지 않습니다.

누가 알겠습니까?

Answer 1

이 100 % 정확 아니지만 시작, 당신은 당신이 찾고있는 모양에 맞게 여기에서 조정할 수 있어야한다 : http://jsfiddle.net/shannabarnard/e83qygoj/3/

HTML

<div class="box"> 
    <div class="box_bg"> 
     <div class="corner one"></div> 
     <div class="corner two"></div> 
    </div> 
</div> 

CSS를

.box { 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
     -o-transform: rotate(-45deg); 
      margin-top:-50px; 
} 

.box_bg { 
    background: red; 
    height: 300px; 
    width: 300px; 
    margin: 100px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
     -o-transform: rotate(45deg); 
    -moz-border-radius: 20%; 
    -webkit-border-radius: 20%; 
     border-radius: 20%; 
} 

.box_bg:before { 
    content: " "; 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    background-color: #fff; 
    border-radius: 20px; 
} 

.corner { 
     display: inline-block; 
     width: 0; 
     height: 0; 
     border-left: 0 solid transparent; 
     border-right: 70px solid transparent; 
     border-top: 100px solid red; 
     -moz-border-radius: 50%; 
     -webkit-border-radius: 50%; 
     border-radius: 50%; 
     float: left; 
     margin-left: 15px; 
} 

.one { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
     -o-transform: rotate(0deg); 
} 

.two { 
    margin-left: -70px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
     -o-transform: rotate(-90deg); 
} 

Answer 2

CSS 유사 요소 (w3c spec)와 CSS 테두리 반경 (w3c spec)의 조합을 시도해보십시오.

이미 시도한 무엇 3,691,363,210

jsfiddle Demo

.box { 
 
    position: relative; 
 
    padding: 10px; 
 
    margin: 30px auto; 
 
    background: darkorange; 
 
    width: 300px; 
 
} 
 
.content { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.top-bottom, 
 
.left-right { 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
.top-bottom:before, 
 
.top-bottom:after { 
 
    z-index: 1; 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    background: darkorange; 
 
    right: 0; 
 
    left: 0; 
 
    height: 12px; 
 
    border: 4px solid darkgreen; 
 
} 
 
.top-bottom:before { 
 
    top: -12px; 
 
    border-bottom: 0; 
 
    border-top-left-radius: 13px; 
 
    border-top-right-radius: 13px; 
 
} 
 
.top-bottom:after { 
 
    bottom: -12px; 
 
    border-top: 0; 
 
    border-bottom-left-radius: 13px; 
 
    border-bottom-right-radius: 13px; 
 
} 
 
.left-right:before, 
 
.left-right:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    background: darkorange; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 12px; 
 
    border: 4px solid darkgreen; 
 
} 
 
.left-right:before { 
 
    left: -12px; 
 
    border-top-left-radius: 13px; 
 
    border-bottom-left-radius: 13px; 
 
    border-right: 0; 
 
} 
 
.left-right:after { 
 
    right: -12px; 
 
    border-top-right-radius: 13px; 
 
    border-bottom-right-radius: 13px; 
 
    border-left: 0; 
 
}

<div class="box"> 
 
    <div class="top-bottom"></div> 
 
    <div class="left-right"></div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam iusto magnam natus amet in assumenda iure recusandae aspernatur animi blanditiis molestiae sunt nisi temporibus reprehenderit nesciunt doloribus fugit aliquam! Vero! 
 
    </div> 
 
</div>