CSS로 만든 프레임을 div 위에 놓고 너비를 변경해도 div의 내용에는 영향을주지 않고 프레임의 너비에만 영향을 줍니까?

Question

내가 CSS로 만든 프레임을 div 위에 놓고 프레임의 너비를 조정할 때 div의 너비를 변경하지 않는 방법을 알고 싶습니까?

는 나는 내가하고 싶은 것에 example 내 HTML과 CSS와 이미지를 첨부

.color { 
 
    width: 100%; 
 
    background-color: #E65959; 
 
} 
 
.shape { 
 
    float: auto; 
 
    z-index: -1 height: 100%; 
 
    width: 100%; 
 
    border-bottom: 10px solid red; 
 
    border-right: 10px solid red; 
 
    border-top: 10px solid red; 
 
    border-left: 10px solid red; 
 
    -webkit-transform: skew(0deg); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="shape"> 
 
    <section id="QueEsIAM"> 
 
    <div class="container color" id="fondoIm"> 
 
     <div class="row"> 
 
     <div class="col-md-12 text-center"> 
 
      <h2 class="section-heading titulos">TITLE</h2> 
 
      <p class="subs">Lorem ipsum</p> 
 
     </div> 
 
     </div> 
 
     <div class="row text-center"> 
 
     <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 col-xs-4"> 
 
      <a href="" class="ov"> 
 
      <img src="https://support.apple.com/library/content/dam/edam/applecare/images/en_US/osx/preview_icon_mul.png" width="200px" height="200px" alt="" class="iconos"> 
 
      </a> 
 
      <h4 class="service-heading">Subtitle</h4> 
 
     </div> 
 

 
     <div class="col-md-4 col-sm-4 col-xs-4"> 
 
      <a href=""> 
 
      <img src="https://support.apple.com/library/content/dam/edam/applecare/images/en_US/osx/preview_icon_mul.png" width="200px" height="200px" alt="" class="iconos"> 
 
      </a> 
 
      <h4 class="service-heading">Subtitle2</h4> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</div>

Answer 1

당신은 코드를 사용할 수 있습니다 :

<style> 
.color { 
    width: 98%; 
    background-color: #E65959; 
    padding:2%; 
} 
.shape { 

    height: 100%; 
    width: 96%; 
    border: 2px solid #fff; 
    padding:2%; 
} 
.hide-border{ 
    position: relative; 
    background-color: #E65959; 
    height:4px; 
    z-index:1; 
    width:40%; 
    margin:0 auto; 
    top:2px 
} 
</style>  
<div class="color"> 
    <div class="hide-border"> 

    </div> 
    <div class="shape"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the , when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    </div> 
</div>