我如何修復fieldset中正方形的位置？

Question

我想方形像下面所有的屏幕尺寸

但是，當我調整在較小的屏幕尺寸窗口它正在尋找象下面這樣：

請幫我解決這個疑難問題的嘗試方法很多，但couldnot解決problem.Related代碼如下：

HTML：

<div class="price-area"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <div class="col-xs-12 col-sm-6"> 
        <div class="square"> 
         <fieldset class="price-border"> 
          <legend>Standard</legend> 
          <p class="one" >Leaflet • Poster</p> 
          <p>Banner • Bill Board • Support 24/7</p> 
         </fieldset> 
        </div> 
       </div> 
       <div class="col-xs-12 col-sm-6">  
       </div> 
      </div> 
      <div class="col-xs-12"></div> 
     </div> 
    </div> 
</div> 

CSS：

.square { 
    position: relative; 
} 
.price-border { 
    margin-bottom: 25px; 
} 
.price-border legend { 
    width: auto; 
    margin-bottom: 2px; 
    margin-left: 42%; 
} 
.price-border p.one { 
    text-align: center; 
    margin-top: 20px 20px 10px auto; 
} 
.price-border p:last-child { 
    text-align: center; 
    margin-bottom: 50px; 
    margin-right: 20px; 
} 
.price-border:after { 
    height: 0px; 
    width: 0px; 
    border: 39px solid #000; 
    position: absolute; 
    top: 34%; 
    left: 93.5%; 
    content: ""; 
    display: block; 
    z-index: ; 
    transform: rotate(45deg); 
} 

Answer 1

變化.price-border:after風格

/* CHANGES */ 
.price-border:after { 
    left: auto; 
    right: -36px; 
} 

基本上你只需要你的元素移動到像素的數量，以及如何你的元素有你可以設置靜態寬度權正確的屬性。 更通用的解決方案將與變換一起完成。對於你的情況，代碼如下。

.price-border:after { 
    left: 100%; 
    transform: translateX(-55%) rotate(45deg); 
}