我怎样才能在fieldset中固定一个正方形的位置？

Question

我想要所有屏幕尺寸的正方形如下

但是当我将 window 调整为较小的屏幕尺寸时，它看起来像下面这样：

请帮我解决这个问题 problem.I 尝试了很多方法但无法解决 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);
}

我怎样才能在fieldset中固定一个正方形的位置？

How can i fix position of a square in fieldset?

html

css

css-position

twitter-bootstrap