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?
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/
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>
This approach allows you to:
add any content and the borders will adapt around it regardless of height or width of the content
support transparent background and can be displayed over an image or non plain colors
doesn't add any unsemantic elements
It relies on 2 absolutely positioned pseudo elements and one div. The spacing between the content and the borders is controlled by the padding on the div :
div{
position:relative;
display:inline-block;
padding:50px 100px;
border-left:1px solid #000;
text-align:center;
}
div:before, div:after{
content:'';
position:absolute;
right:50%; left:0;
height:50px;
border-right:1px solid #000;
}
div:before{
top:0;
border-top:1px solid #000;
}
div:after{
bottom:0;
border-bottom:1px solid #000;
}
body{background:url('http://i.imgur.com/3IXm5qm.jpg');background-size:cover;}
<div>
<h2>This is a very long title on<br/> 2 lines</h2>
<button>Button</button>
<p>Some text</p>
</div>
Well, go with the above answers, I recommend using pseudo elements to achieve this effect.
But There is another way to accomplish this without using
pseudo-elements.
Here is how you should do this.
.row{display:table;table-layout:fixed;}
.col{display:table-cell;}
.row{width:250px; margin: auto;}
.mid.row > .col{ height: 100px; }
.col{ text-align: center;}
.top.col, .bottom.col{
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
height: 50px;
}
.bottom.col{
border-top: 0;
border-bottom: 1px solid black;
}
.mid.row > .col{
border-left: 1px solid black;
border-right: 0;
vertical-align: middle;
text-align: right;
}
.mid.row > .col span{
margin-right: -30px;
max-width: 300px;
}
<div class="row">
<div class="top col"></div>
</div>
<div class="mid row">
<div class="col">
<span>Hey you can achieve this without using pseudo elements :)</span>
</div>
</div>
<div class="row">
<div class="bottom col"></div>
</div>
We can do this with linear-gradients. No SVG, no pseudo-element. I used some variables to control everything easily.
.container {
/* you can change these variables */
--border-color: #000;
--border-width: 2px;
--space: 100px;
width: 200px;
height: 300px;
position: relative;
background: linear-gradient(var(--border-color), var(--border-color)) 0 0/var(--border-width) 100%,
linear-gradient(var(--border-color), var(--border-color)) 0 100%/100% var(--border-width), linear-gradient(var(--border-color), var(--border-color)) 0 0/100% var(--border-width),
linear-gradient(var(--border-color), var(--border-color)) 100% 0/var(--border-width) calc(50% - (var(--space) / 2)),
linear-gradient(var(--border-color), var(--border-color)) 100% 100%/var(--border-width) calc(50% - (var(--space) / 2));
background-repeat: no-repeat;
}
.content {
position: absolute;
width: 200px;
top: 50%;
transform: translateY(-50%);
right: -100px;
background: yellow;
}
<div class="container">
<div class="content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</div>
</div>
Related
How to get triangle layout of 'mission' section within the container only without using "polygon". I don't want it to flow outside the container.
You can make triangles using border property of css.
Check out this link for more shapes : https://css-tricks.com/examples/ShapesOfCSS/
.container {
position: relative;
}
.mission {
position: absolute;
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 100px solid transparent;
border-top: 150px solid red;
border-bottom: 0px solid transparent;
}
.mission + div {
position: absolute;
}
.content {
position: absolute;
width: 350px;
height: 200px;
background: lightgrey;
padding-left: 100px;
}
<div class="container">
<div class="content">
Content
</div>
<div class="mission">
</div>
<div>
Mission
</div>
</div>
Desired Behaviour
I want to make this shape in CSS - it's a tab for a menu item.
[ example with text ]
The implementation scenario is an HTML template where CSS style sheets are switched to make color changes etc.
I want to use CSS to style the tab rather than background images so that I don't have to create a specific background image for each theme's version of a menu item tab.
What I've Tried
I looked around at some CSS shape sites and tried to pull them apart and adjust border widths etc, but haven't been able to get the desired result yet. Below are a few attempts.
.my_tab:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -45px;
left: 0px;
border-width: 0 105px 25px 0;
border-style: solid;
border-color: transparent transparent blue;
}
.my_tab {
position: relative;
width: 104px;
border-width: 20px 0 0 0;
border-style: solid;
border-color: red transparent;
top: 50px;
}
.my_tab_two {
background: purple none repeat scroll 0 0;
height: 22px;
position: relative;
top: 150px;
width: 104px;
}
.my_tab_two a {
color: white;
display: block;
font-family: arial;
margin: 0 auto;
text-align: center;
text-decoration: none;
width: 40px !important;
}
.my_tab_three {
background: green none repeat scroll 0 0;
border-radius: 0 5px 0 0;
height: 15px;
position: relative;
top: 113px;
width: 104px;
}
/* -------- */
p {
font-family: arial;
}
.para_two {
margin-top: 105px;
position: absolute;
}
<p>attempt 01:</p>
<div class="my_tab"></div>
<p class="para_two">attempt 02:</p>
<div class="my_tab_two">link
</div>
<div class="my_tab_three"></div>
<div class="my_tab_four"></div>
JSFiddle
http://jsfiddle.net/rwone/evz4d3mw/
You can create this by placing after and before pseudo-elements the after pseudo-element is skewed to make the slanted edges.
Note:This may not be the best solution i would suggest svg for this
.tab{
width:100px;
height:100px;
background:darkred;
border-top-left-radius:15px;
color:#fff;
position:relative;
padding:10px;
border-left:5px solid #000;
border-bottom:5px solid #000;
border-top:5px solid #000;
cursor:pointer;
}
.tab:after{
position:absolute;
content:"";
width:30%;
height:50%;
background:darkred;
right:-30%;
transform:skewY(45deg);
top:11%;
border-top:7px solid #000;
border-right:5px solid #000;
box-sizing:border-box;
}
.tab:before{
position:absolute;
content:"";
width:30%;
height:60%;
right:-30%;
background:darkred;
bottom:-5px;
border-bottom:5px solid #000;
border-right:5px solid #000;
box-sizing:border-box;
<div class="tab">Some text</div>
Svg solution
.tab {
width: 200px;
height: 200px;
}
<div class="tab">
<svg width="100%" height="100%" viewbox="0 0 100 100">
<path d="m5 5 l 75 0 15 15 0 60 -90 0 z" fill="darkred" stroke="#000" stroke-width="5"/>
</svg>
I am trying to design the following image
The following has been my attempt so far, but i am just not able to get the content "x" to reach the four corners of the div.
HTML
<div id="cancel">X</div>
CSS
#cancel{
float: right;
border: 1px solid yellow;
font-family: 'Helvetica', 'Arial', sans-serif;
font-weight: lighter;
font-size: 3em;
width: 10%;
text-align: center;
background-color: #d5d6da;
color: white;
width: 12%;
cursor: pointer;
}
The following image is the output i was to be get to so far
I'd use a bit of scale for it - and a pseudo element :
Example
#cancel {
width: 0.9em;
height: 0.9em;
position: relative;
font-family: helvetica, arial, sans-serif;
font-weight: lighter;
font-size: 3em;
color: white;
background-color: #d5d6da;
cursor: pointer;
}
#cancel:after {
content: 'X';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%) scaleX(1.2);
transform: translate(-50%,-50%) scaleX(1.2);
}
Or without any fonts and full control over how it looks :
Demo
#cancel {
width: 40px;
height: 40px;
position: relative;
background-color: #d5d6da;
cursor: pointer;
}
#cancel:before, #cancel:after {
content: '';
width: 110%;
height: 3px;
position: absolute;
top: 50%;
left: 50%;
background: white;
}
#cancel:before {
-webkit-transform: translate(-50%,-50%) rotate(45deg);
transform: translate(-50%,-50%) rotate(45deg);
}
#cancel:after {
-webkit-transform: translate(-50%,-50%) rotate(-45deg);
transform: translate(-50%,-50%) rotate(-45deg);
}
Here we create two pseudo elements (:before and :after) that are rectangles, both having a width of 110% of the parent and a few pixels height. They are then centered horizontally and vertically inside the parent with absolute positioning and a transform: translate. Last step is to make one rotate 45 degrees and the other the same amount but in the opposite direction. This will make them form a cross - the more width the elements are given, the closer they will be to the corners of the parent (at 141% they will be touching exactly since this is the length of the diagonal compared to it's the width).
I might recommend using an image file such as an svg so that you get a consistent look across all browsers. If you use text like an "X" or a multiplication sign, you might get an unexpected result if the user doesn't have the same fonts installed as you do.
Here is a live example of how you could go about using inline svg. Of course if you want to reuse the icon, you should use an img tag with an external .svg file instead:
Screenshot:
Demo:
#container {
width: 50px;
height: 50px;
background-color: gray;
}
<div id="container">
<svg version="1.1" id="Layer_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="47" viewBox="0 0 14 14" overflow="visible" enable-background="new -1.301 -0.015 17.553 14.978" xml:space="preserve">
<g>
<line fill="none" stroke="#FFFFFF" stroke-width="2" x1="1" y1="1" x2="14" y2="14" />
<line fill="none" stroke="#FFFFFF" stroke-width="2" x1="14" y1="1" x2="1" y2="14" />
</g>
</svg>
</div>
You are looking for the Unicode Character 'MULTIPLICATION SIGN'. Perhaps there is a more elegant solution. This should work.
HTML
<div class="close"></div>
CSS
.close {
height: 100px;
width: 100px;
background-color: #2980b9;
border-radius: 5px;
}
.close:after {
position:relative;
content:"\d7";
font-size:235px;
color:white; /* #c0392b; */
font-weight:bold;
top:-100px;
left:-24px
}
JSFiddle
http://www.fileformat.info/info/unicode/char/00d7/index.htm
I like the svg solution as it will scale nicely, but if you want a CSS only solution, you can achieve something "similar" by doing this:
Create the box and assign it a relative position.
Use the pseudo-elements ::before and ::after to create the X (by positioning them absolutely, using the top border, and rotating them 45 and -45 degrees).
Here is a sample on how to do it:
.cancel {
position:relative;
width:100px;
height:100px;
background:#d0d0d0;
}
.cancel::before, .cancel::after {
content:"";
position:absolute;
top:calc(50% - 5px);
left:0px;
width:100%;
border-top:10px solid white;
transform:rotate(45deg);
transform-origin: 50% 50%;
}
.cancel::after {
transform:rotate(-45deg);
}
<div class="cancel"></div>
Some good things about this solution:
It can be easily animated using CSS3 transitions/animations (for example animate the X when clicked);
It "scales" a little: as it uses percentages for the ::before and ::after, the X grows proportionally if you grow/shrink the size of the .cancel box. Example.
Some cons about this solution:
It doesn't scale as nicely as the SVG.
You many need to use prefixes to make it work on some browsers.
Not sure if this is what you're looking for - but perhaps try a CSS solution with no "X" content? This solution is built with four div's that are all shaped like triangles with the help of CSS borders. Depending on how you position the triangles, your "X" in the middle can be as thin or as thick as you like, and the "X" will go all the way to the corners. The positioning in what I've posted isn't incredibly elegant, but you can get around this using floats and padding. I hope this helps!
HTML:
<div class="crossBox">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS:
.crossBox div {
display: inline-block;
}
.crossBox div:first-child {
width: 0;
height: 0;
border-top: 58px solid blue;
border-left: 58px solid transparent;
border-right: 58px solid transparent;
background-color: transparent;
border-bottom: none;
position: relative;
top: -34px;
left: 5px;
}
.crossBox div:nth-child(2) {
width: 0;
height: 0;
border-left: 58px solid blue;
border-top: 58px solid transparent;
border-bottom: 58px solid transparent;
background-color: transparent;
border-right: none;
position: relative;
left: -118px;
top: 30px;
}
.crossBox div:nth-child(3) {
width: 0;
height: 0;
border-right: 58px solid blue;
border-top: 58px solid transparent;
border-bottom: 58px solid transparent;
background-color: transparent;
border-left: none;
position: relative;
left: -116px;
top: 30px;
}
.crossBox div:nth-child(4) {
width: 0;
height: 0;
border-bottom: 58px solid blue;
border-left: 58px solid transparent;
border-right: 58px solid transparent;
background-color: transparent;
border-top: none;
position: relative;
top: 36px;
left: -239px;
}
I am trying to display a few words inside of a CSS styled arrow. I have figured out how to create an arrow with CSS which works fine. however, when I place the arrow within <h2>, complete arrow is not being displayed.
The source code is as follows
HTML
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
STYLE
<style>
.arrow-right::after{
content: "";
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
}
</style>
The output is as follows
The arrow pointer is not being displayed completely. Am I using the elements wrongly? I will need the div / h2 height to be bigger later, but at least that is not my concern right now since the arrow itself is not being displayed as desired.
Edit:
Sorry for my bad drawing. This sample below is what I want but of course the arrow would be lots nicer I just used paints to give it a quick draw.
Is this what you're looking for?
http://jsfiddle.net/61tc5em9/2/
HTML
<div id="container">
<div id="arrow">text text text</div>
<div id="content">text text text text</div>
</div>
CSS
#container {
height: 75px;
background-color: black;
position: relative;
white-space: nowrap;
}
#arrow {
width: 30%;
background-color: red;
text-align: center;
font-size: 1.5em;
line-height: 75px;
}
#arrow::after {
content: "";
border-top: 37px solid transparent;
border-bottom: 38px solid transparent;
border-left: 50px solid red;
position: absolute;
left: 30%;
}
#content {
color: yellow;
font-size: 1.5em;
position: absolute;
left: 50%;
top: 25px;
}
Hope this helps. Let me know if you need any changes.
You need font-size:0; for the arrow.
.arrow-right::after {
content: "";
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid green;
font-size: 0;
position: relative;
top: -8px;
}
span{
display: inline-block;
}
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
Recommendations for improving your code and make it more dynamic:
Use :after in the statement element itself (this way you will avoid
the extra code in html and you can position the arrow relative to the element).
Align it to the right using left: 100% (so it is always position to
the right regardless of the width of the arrow).
Use top: 50% and margin-top: -(height/2)px to center it vertically.
Just like this:
.wrapper {
padding: 2px 0;
background: yellow;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent; /*change the border width to set the desired hieght of the arrow*/
border-bottom: 15px solid transparent;
border-left: 15px solid green; /*change the border width to set the desired width of the arrow*/
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">This is what I want</span>
<span style="margin-left: 50px;">is this what you want?</span>
</h2>
</div>
Note that in this way you have a more semantic code because you don't have dummy element in your html and if you want more statement it will put the arrow behind automatically like this:
.wrapper {
padding: 2px 0;
background: yellow;
margin-bottom: 10px;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">One statement</span>
<span style="margin-left: 50px;">Good</span>
<span class="statement">Two statement</span>
<span style="margin-left: 50px;">Great</span>
</h2>
</div>
<div class="wrapper">
<h2>
<span class="statement">Where is the arrow?</span>
<span style="margin-left: 50px;">Do not worry about it</span>
</h2>
</div>
I want to add a vertical line between the multiple divs so that it looks like the attached image:
I'm trying to achieve that by adding a div .border and setting its position absolute. However I want to add some margin between the border and make the border appear behind the boxes as in above image.
Here's the code I'm trying:
HTML:
<div class="wrap">
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> right</div>
</div>
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> right</div>
</div>
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> right</div>
</div>
</div>
CSS:
.wrap{
position: relative;
overflow: hidden;
}
.box{
overflow: hidden;
margin-top: 50px;
}
.box:first-child{
margin-top: 0;
}
.figure{
width: 50px;
height: 50px;
background: yellow;
display: inline-block;
margin-right: 10px;
}
.right{
display: inline-block;
}
.border{
border-right: 3px solid red;
height: 100%;
left: 24px;
position: absolute;
top: 0;
width: 1px;
}
.box:last-child .border{
display: none;
}
JSFiddle:
http://jsfiddle.net/w5TY9/
Here you go.
WORKING DEMO
The HTML:
<div class="wrap">
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> </div>
</div>
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> </div>
</div>
<div class="box">
<div class="border"></div>
<div class="figure"></div>
<div class="right"> </div>
</div>
</div>
The CSS:
.wrap{
position: relative;
overflow: hidden;
}
.box{
overflow: hidden;
margin-top: 50px;
}
.box:first-child{
margin-top: 0;
}
.figure{
width: 50px;
height: 50px;
background: yellow;
display: inline-block;
margin-right: 10px;
}
.right{
display: inline-block;
}
.border {
border-right: 3px solid #FF0000;
height: 98%;
left: 24px;
position: absolute;
top: 0;
width: 1px;
z-index: -1;
}
.box:last-child .border{
display: none;
}
.figure {
background: none repeat scroll 0 0 #FFFF00;
border-bottom: 12px solid #FFFFFF;
border-top: 12px solid #FFFFFF;
display: inline-block;
height: 50px;
margin-right: 10px;
width: 50px;
}
The CSS Changes:
.border {
border-right: 3px solid #FF0000;
height: 98%;
left: 24px;
position: absolute;
top: 0;
width: 1px;
z-index: -1;
}
.figure {
background: none repeat scroll 0 0 #FFFF00;
border-bottom: 12px solid #FFFFFF;
border-top: 12px solid #FFFFFF;
display: inline-block;
height: 50px;
margin-right: 10px;
width: 50px;
}
Hope this helps.
.border{z-index: -1;} use this
And see link http://jsfiddle.net/bipin_kumar/w5TY9/2/
.figure{
width: 50px;
height: 50px;
background: yellow;
display: inline-block;
margin-right: 10px;
z-index:1;
border:3px solid white;
}
.border{
border-right: 3px solid red;
height: 100%;
left: 24px;
position: absolute;
top: 0;
width: 1px;
z-index:-1;
}
replace your classes with mine, you will get both effects
.border{
border-right: 3px solid red;
height: 100%;
left: 24px;
position: absolute;
top: 0;
width: 1px;
}
Class need to be added the following property and value
z-index: -1;
In your css you need to add the following two rules for the .border class:
z-index: -1;
margin-left: -1px
The first line puts the line behind the boxes. So in the vertical space without boxes the line shows up.
One small improvement for centering the border perfectly under the boxes:
Your border is 3px width so the border should be moved at least 1px to the left in order to stay centered. With margin-left: -1px you get the correct result. If you want the border to be completely perfect centered you should either use a border with of 4px and a margin-left of -1px or a border with of 2px and a margin-left of 1px;
see http://jsfiddle.net/w5TY9/1/
Add z-index=-1 to border class.
check this fiddle
What you want is very easy. The short version is like this:
<div style="background-color:yellow; height:30px;width:30px;"> </div>
<div style="background-color:red; height:30px; width:5px; margin-left:10px;"> </div>
In this way you have a square with background yellow and below that you have a red line
with 5px width or whatever you want.