css - 我怎样才能在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

改变.price-border:after风格

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

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

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