如何在fieldset中修复正方形的位置？

Question

我希望所有屏幕尺寸如下所示

但是当我以较小的屏幕尺寸调整窗口大小时，它看起来如下所示：

请帮我解决这个问题。我试过很多但是无法解决问题。相关代码如下：

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

更改var str = "\u041b\u0430\...\u0446" str.split("\u").join("") 样式

.price-border:after

基本上，您只想将元素向右移动以获得像素数以及元素的静态宽度，您可以设置正确的属性。 更通用的解决方案是使用转换来完成它。对于您的情况，代码如下。

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