Menu
I am looking for a way to create an incomplete square with borders with some text and a background with pure css. Here is what I am trying to achieve:
My initial idea is to create the shape based on three shapes and then colorize the borders accordingly:
But I am a bit concerned about the adaptive version - scaling three shapes. So maybe a better idea, anyone?
906
Use two color stops: #880015 at 50% and #fff at 50% Use a background-size of 100% width and 3px in height, i.e. background-size: 100% 3px. Position the two backgrounds at the top left and bottom left of your element.
If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.
You can do with css pseudo ::after and ::before , something like this
.incomplete-box{ border: solid 1px #fff; border-right: none; width: 100px; height: auto; position: relative; } .incomplete-box::after, .incomplete-box::before{ content: ''; position: absolute; height: 30%; width: 1px; background-color: #fff; right: 0; } .incomplete-box::after{ top: 0; } .incomplete-box::before{ bottom: 0; } Demo
Fixed width and height : https://jsfiddle.net/nikhilvkd/qt5ne3yw/
Auto width and height: https://jsfiddle.net/nikhilvkd/0v3k8rv8/2/
68
You can do this with :before and :after pseudo elements
Complete design Fiddle
.square { width: 200px; height: 300px; border-left: 1px solid gray; border-bottom: 1px solid gray; border-top: 1px solid gray; position: relative; } .square:before, .square:after { content: ""; height: 20%; position: absolute; right: 0; border-right: 1px solid gray; } .square:before { bottom: 0; }<div class="square"></div>or SVG
line { stroke: #6996FB; stroke-width: 2; } svg { overflow: visible; } button { padding: 10px 50px; border: none; color: white; margin-right: 10px; margin-top: 15px; } .btn-blue { background: #5D8CFF; } .btn-green { background: #33F1D9; } h3 { margin: 0; }<svg width="250" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="1" y1="1" x2="250" y2="1"></line> <line x1="0" y1="300" x2="250" y2="300"></line> <line x1="1" y1="1" x2="1" y2="300"></line> <line x1="249" y1="0" x2="249" y2="70"></line> <line x1="249" y1="230" x2="249" y2="300"></line> <foreignobject x="60" y="90" width="400" height="180"> <body xmlns="http://www.w3.org/1999/xhtml"> <h3>Lorem ipsum dolor sit <br> amet, consectetur adipisicing elit. Suscipit</h3> <button class="btn-blue">Btn 1</button><button class="btn-green">Btn 2</button> </body> </foreignobject> </svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
