How can i fix position of a square in fieldset? - css

Question

I want the square like below for all screensize
But when i resize the window in smaller screen size it is looking like below:
Please help me to solve this problem.I tried in many ways but couldnot solve the problem.Related codes are given below :
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

Change .price-border:after style
/* CHANGES */
.price-border:after {
left: auto;
right: -36px;
}
Basically you only want to move your element to the right for number of pixels and how your element has static width you can just set right attribute.
More generic solution would be doing it with transform. For your case, code bellow.
.price-border:after {
left: 100%;
transform: translateX(-55%) rotate(45deg);
}