I'm building a bootstrap base site, where I'm trying to create a frame with text attached along is't left side (see attached sketch-up image done in MS paint). So far to no avail.
I attempted to use fieldset and legend, and have been able to create a title on top of the fieldset in the legend, but I cannot rotate the legend to sit on the side as I want to. Furthermore, the fieldset/legend solution does not work properly in IE, as the legend keeps flying around uncontrollably.
Therefore, I will like to know if you have any ideas on how this could be achieved.
I thought about just setting them frames and the text as part of my background, but as I scale my browser window up and down, everything will look very messy.
Looking forward to hear your ideas. Thank you in advance and have a great day.
Like to sketch-up example of what I would like my frame to looklike
Try this Demo Here
<div class="outerDiv">
<div class="innerDiv">Example text here</div>
</div>
.outerDiv{ height: 300px; width: 140px; border-radius: 10px; border:2px solid green; margin: 0 auto; position: relative }
.innerDiv{
color: green;
font-size: 15px;
left: -65px;
position: absolute;
top: 54px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.