How would I go about making this in CSS3/HTML5?
The Red background is the background of the div. The inner white is another div that will contain some text.
Since you already have 2 containers, you can use two pairs of pseudo elements for the corners, like this:
.outer {
width: 120px;
background: #a08;
position: relative;
padding: 30px;
}
.inner {
height: 118px;
background: #fff;
border: 1px dashed #a08;
flex: 1;
}
.outer::before, .outer::after, .inner::before, .inner::after {
content: '';
width: 20px;
height: 20px;
background: #a08;
background-clip: padding-box;
border: 1px dashed #a08;
border-radius: 50%;
position: absolute;
z-index: 1;
}
.outer::before {
top: 20px;
left: 20px;
}
.outer::after {
top: 20px;
right: 20px;
}
.inner::before {
bottom: 20px;
left: 20px;
}
.inner::after {
bottom: 20px;
right: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>
Related
Below is the image I am trying for; I managed to get a rectangle using CSS, but I am trying for a rectangle above another one .
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
}
<div ondragstart="dragStart(event)" draggable="true" id="dragtarget2">
<p>meter</p>
</div>
Make your rectangles position: absolute and the container as position: relative.
This is the code you're looking for.
.container{
position: relative;
}
.first , .second, .third {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 40px;
background-color: gray;
border-radius: 4px;
border: 2px solid red;
}
.second{
top: 4px;
left: 4px;
}
.third{
top: 8px;
left: 8px;
}
<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
Use position: absolute/position: relative to move element from it's origin position. Use z-index to move element above/below other elements (higher z-index - higher element is positioned).
.border {
border: 2px solid red;
background-color: #aaa;
width: 200px;
height: 50px;
line-height: 50px;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.border:nth-child(2) {
left: 5px;
top: 5px;
z-index: 6;
}
.border:nth-child(3) {
left: 10px;
top: 10px;
z-index: 7;
}
.wrapper {
margin: 10px;
/* NOTE: this does not effect absolute elements */
padding: 10px;
/* NOTE: this will be origin of absolute elements coordinates */
position: relative;
}
<div class="wrapper">
<div class="border">1</div>
<div class="border">2</div>
<div class="border origin">SmartMeter</div>
</div>
With less HTML:
.wrapper {
position: relative;
margin: 10px;
}
.border {
position: relative;
}
.border span,
.border:before,
.border:after {
content: '';
position: absolute;
left: 0;
top: 0;
border: 2px solid red;
background: #aaa;
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
}
.border:after {
left: 5px;
top: 5px;
z-index: 6;
}
.border span {
left: 10px;
top: 10px;
z-index: 7;
}
<div class="wrapper">
<div class="border"><span>SmartMeter</span>
</div>
</div>
I have added two outer divs so that the code is as follows.
#dragtarget2 {
float: left;
clear: left;
width: 176px;
height: 76px;
background: #968282;
border-radius: 13px;
border: 2px solid;
padding: 2px;
}
.dragtarget0 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 2px;
margin: 2px;
}
.dragtarget1 {
float: left;
clear: left;
width: 176px;
height: 76px;
border: 2px solid;
border-radius: 13px;
padding: 3px;
}
<div class="dragtarget0">
<div class="dragtarget1">
<div id="dragtarget2">
<p>meter</p>
</div>
</div>
</div>
How to create the curve that you see in picture with CSS and HTML?
Can I use CSS border radius or use other solution?
You could do it with two divs and psuedo elements :before and :after. Working code below
.top-bar{
height: 100px;
width: 100%;
background-color: #55c3ff;
}
.curved-bottom{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #55c3ff;
border-radius: 0 0 20px 20px;
position: relative;
}
.curved-bottom:before {
height: 50px;
width: 16%;
background-color: white;
border-top-right-radius: 10px;
left: -16%;
content: '';
position: absolute;
top: -8px;
}
.curved-bottom:after {
height: 50px;
width: 16%;
background-color: white;
border-top-left-radius: 10px;
right: -16%;
content: '';
position: absolute;
top: -8px;
}
<div class="top-bar"></div>
<div class="curved-bottom"></div>
If your main horizontal blue bar is a div, and the box sticking down is a separate div, you can use the pseudo elements :before and :after to create those inner radius.
See the following as an example:
html,
body {
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: #5DC4FD;
width: 100%;
height: 160px;
}
.tab {
position: relative;
top: 130px;
background-color: #5DC4FD;
width: 80%;
height: 100px;
margin: 0 auto;
border-radius: 0 0 30px 30px;
}
.tab:before {
position: absolute;
content: "";
left: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 0 30px 0 0;
}
.tab:after {
position: absolute;
content: "";
right: -50%;
width: 50%;
height: 100px;
background-color: white;
border-radius: 30px 0 0 0;
}
<div class="header">
<div class="tab">
</div>
</div>
Well, you could use overlapping divs like this:
#top {
background: #00BFFF;
width: 100%;
height: 150px;
}
#container{
display: flex;
}
#mid{
background: #00BFFF;
width: 70%;
height: 50px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
#left{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-right-radius: 25px;
}
#right{
background: #FFFFFF;
margin-top: -50px;
width: 15%;
height: 50px;
border-top-left-radius: 25px;
}
<div id="top"></div>
<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>
but I'd recommend using a background image with the desired shape
I am trying to recreate this image using a combination of CSS and HTML with no luck. Please advise.
Current Code:
.lens-profile-timeline {
list-style: none;
padding: 0;
margin: 60px 0 80px;
border-bottom: 8px solid #39752c;
position: relative;
}
.lens-profile-timeline li {
position: absolute;
width: 16px;
height: 16px;
border: 13px solid #39752c;
border-radius: 16px;
background: #fff;
margin-top: -10px;
margin-left: 20px;
margin-right: 20px;
}
.lens-profile-timeline time,
.lens-profile-timeline p {
left: -27px;
top: -40px;
position: absolute;
width: 70px;
text-align: center;
}
.lens-profile-timeline time {
margin-top: 70px;
font-size: 18px;
}
.lens-profile-timeline p {
margin-top: -0px;
font-size: 10px;
line-height: 1.1;
}
.lens-profile-timeline p:after {
content: "";
height: 8px;
border-left: 1px solid #39752c;
position: absolute;
bottom: -10px;
left: 35px;
}
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<ol class="lens-profile-timeline point">
<li style="left: 0;">
<time>1970</time>
</li>
<li style="left: 45%;">
<time datetime="2003-01-01">2003</time>
</li>
<li style="right: 0;">
<time>2013</time>
<p class="hidden">Current Year</p>
</li>
</ol>
</div>
<div class="col-md-3">
</div>
</div>
Above represents the current code being used to generate the image. However you will notice there are several elements which are missing.
You can do it with a combination of pseudo elements, CSS triangles and linear-gradients.
The linear-gradient(to right, #AFCB6D, #126A38); will create a mixed background color effect.
The triangles at the end can be created using CSS triangles concept using pseudo-elements.
The indicators are created with pseudo element circles as well. The indicator text can be specified within content: " " or remove the pseudo-elements and specify the text within div for better customization.
Regular text without using CSS content:
.timeline {
width: 500px;
height: 10px;
margin: 20px;
background: linear-gradient(to right, #AFCB6D, #126A38);
position: relative;
font-family: Roboto;
}
.timeline::before,
.timeline::after {
content: " ";
position: absolute;
height: 0px;
width: 0px;
top: -5px;
}
.timeline::before {
left: -20px;
border: 10px solid #AFCB6D;
border-color: transparent #AFCB6D transparent transparent;
}
.timeline::after {
right: -20px;
border: 10px solid #126A38;
border-color: transparent transparent transparent #126A38;
}
.indicators {
position: relative;
}
.indicator-1,
.indicator-2,
.indicator-3 {
border: 5px solid #AFCB6D;
background: white;
border-radius: 50%;
width: 10px;
height: 10px;
top: -5px;
position: absolute;
}
.indicator-1 {
left: 10px;
}
.indicator-2 {
border-color: #5B9951;
left: 240px;
}
.indicator-3 {
border-color: #126A38;
left: 475px;
}
.indicator-text {
position: relative;
top: 15px;
}
.indicator-1 .indicator-text {
left: -20px;
}
.indicator-2 .indicator-text {
left: -15px;
}
.indicator-3 .indicator-text {
left: -10px;
}
<div class="timeline">
<div class="indicators">
<div class="indicator-1">
<div class="indicator-text">Standard</div>
</div>
<div class="indicator-2">
<div class="indicator-text">Better</div>
</div>
<div class="indicator-3">
<div class="indicator-text">Best</div>
</div>
</div>
</div>
Titles using content property:
.timeline {
width: 500px;
height: 10px;
margin: 20px;
background: linear-gradient(to right, #AFCB6D, #126A38);
position: relative;
font-family: Roboto;
}
.timeline::before,
.timeline::after {
content: " ";
position: absolute;
height: 0px;
width: 0px;
top: -5px;
}
.timeline::before {
left: -20px;
border: 10px solid #AFCB6D;
border-color: transparent #AFCB6D transparent transparent;
}
.timeline::after {
right: -20px;
border: 10px solid #126A38;
border-color: transparent transparent transparent #126A38;
}
.indicator {
border: 5px solid #5B9951;
background: white;
border-radius: 50%;
width: 10px;
height: 10px;
margin: 0 auto;
top: -5px;
position: relative;
}
.indicator::after {
content: "\a Best";
white-space: pre;
border: 5px solid #126A38;
background: white;
border-radius: 50%;
width: 10px;
height: 10px;
top: -5px;
left: 230px;
position: absolute;
}
.indicator::before {
content: "\a Standard";
white-space: pre;
border: 5px solid #AFCB6D;
background: white;
border-radius: 50%;
width: 10px;
height: 10px;
top: -5px;
left: -240px;
position: absolute;
}
.spacer {
margin-top: 20px;
}
<div class="timeline">
<div class="indicator">
<div class="spacer"></div>Better
</div>
</div>
It's not perfect, but using CSS 3 gradients, and changing a few numbers, you can get something pretty close to your picture (minus the arrows)
I wrapped it all up in a JSBin.
Hope this helps,
Sean
I'm wondering if this shape can be done in css3 with as little html as possible:
So far, I've managed to do this:
.wrapper {
position: relative;
}
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
top: 100px;
left: 100px;
}
.box:before {
content: "";
border: 1px solid #000;
border-bottom: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
top: -12px;
left: -1px;
}
.box:after {
content: "";
border: 1px solid #000;
border-top: 1px solid #fff;
width: 50%;
height: 10px;
position: absolute;
bottom: -12px;
right: -1px;
}
<div class="wrapper">
<div class="box"></div>
</div>
The fiddle is here, but I don't know how to skew it like that so that I have right angled trapezoid on top and bottom.
The shape needs no extra elements
The shape can be created with just the <div>:
The left side is created with the divs left, top and bottom borders.
The right side is made by :before and its top, right and bottom borders
The spans joining the two boxes are created with the :after thanks to skewY
Note the browser support of the transform property. IE 9 requires the -ms- prefix, and Safari and the Android browser require -webkit-.
Working Example - just the shape
The CSS has been condensed and the border style of the pseudo elements is inherited from the div itself.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
<div></div>
Working example - with text
With the example above, the contents will not be contained inside the entire shape. Rather, it will be constrained inside the divs half width. The contents needs to be wrapped in a <span> with 200% width to punch it outside of the divs constraints.
div {
border: solid 4px #000;
border-right-width: 0;
width: 100px;
height: 200px;
position: relative;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 100%;
border: inherit;
border-right-width: 4px;
border-left: none;
position: absolute;
left: 100%;
top: 13px;
margin-left: 20px;
}
div:after {
width: 20px;
border-right: none;
top: 5px;
transform: skewY(40deg);
margin: 0;
}
span {
width: 200%;
display: block;
padding: 20px 10px 10px;
}
<div><span>This is me writing a large amount of words into the div. I think that you may want a span in order to contain them.</span></div>
Using two different elements:
1) Separate the shape in two different rectangular
2)After use pseudo-elements after and before to create the connection line.
My approach:
.wrapper {
position: relative;
}
.box {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 100px;
left: 100px;
border-right: 0;
}
.box2 {
width: 50px;
height: 100px;
border: 4px solid #000;
position: absolute;
top: 112px;
left: 164px;
border-left: 0;
}
.box:after {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
top: 2px;
transform: rotate(45deg);
}
.box:before {
content: "";
position: absolute;
width: 15px;
border: 2px solid #000;
right: -15px;
bottom: -10px;
transform: rotate(45deg);
}
<div class="box"></div>
<div class="box2"></div>
I've used four divs: .left, .right, .middle-top and .middle-bottom; and skewed .middle-top and .middle-bottom to add those connection lines.
.left {
width: 40px;
height: 100px;
border: 3px solid black;
border-right: 1px solid white;
position: absolute;
top: 50px;
left: 100px;
}
.right {
width: 40px;
height: 100px;
border: 3px solid #000;
border-left: 1px solid white;
position: absolute;
top: 60px;
left: 160px;
}
.middle-top {
width: 20px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 55px;
left: 137px;
z-index: 9;
}
.middle-bottom {
width: 21px;
height: 20px;
border-top: 3px solid black;
position: absolute;
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
top: 158px;
left: 135px;
z-index: 9;
}
<div class="left"></div>
<div class="middle-top"></div>
<div class="middle-bottom"></div>
<div class="right"></div>
Right, I ran into a bit of a problem and not to sure if this can be solved another way.
I need to move the content: "F"; and center it onto the border I have in the top left corner. Now is this possible without creating another element?
HTML:
<div class="userBoxF"></div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content: "F";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
The only way I can think to do it is to create the corner as a completely separate element so I can put the text "F" into a span (or something) and move it that way.
Demo Here
Note: Nothing here will change size, width and height for both the box and corner will always be the same.
Here is what I want, using the solution i found but would rather not use.
HTML:
<div class="userBoxF">
<div class="corner"><span>F</span></div>
</div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF .corner {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
.userBoxF .corner span {
display: block;
position: absolute;
top: -30px;
left: -20px;
}
Here is a demo of the solution I came up with but I would rather not create anymore elements.
My Solution
You can use :before wit :after together.
I removed the span:
<div class="userBoxF">
</div>
And changed the CSS blocks to this:
.userBoxF:before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
content: "";
}
.userBoxF:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "F";
font-size: 30px;
}
And here's the updated fiddle
EDIT: Here's an added bonus!
You can jack the "F" from the class, if you want it to be more versatile, if you use CSS's attr inside content. Example:
<div class="userBox" data-l="F">
</div>
And:
.userBox:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "" attr(data-l);
font-size: 30px;
}
And another fiddle
Arguably the "F" is actual content as it's not a styling option...it actually denotes something and, perhaps should be read by a screenreader (for instance) then a span with a gradient (TL - BR) mightbe more appropriate.
JSFiddle Demo
HTML
<div class="userBoxF">
<span class="section-letter">F</span>
</div>
CSS
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.section-letter {
position: absolute;
top: 0;
left: 0;
width:2em;
height:2em;
line-height: 1em;
text-align: left;
padding:0.25em 0 0 0.25em;
font-size: 30px;
background: linear-gradient(135deg, pink 0%, pink 50%, transparent 50%, transparent 100%);
}
Simply use another :psuedo:
Demo Fiddle
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:before,.userBoxF:after{
position: absolute;
top: 0;
left: 0;
}
.userBoxF:before {
content:"";
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
}
.userBoxF:after {
content:attr(data-l);
top: 10px;
left: 10px;
font-size: 30px;
}
From a single pseudo, you can use a gradient as background : DEMO
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content:"F";
position: absolute;
top: 0;
left: 0;
text-indent:20px;
line-height:60px;
width:80px;
height:80px;
background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
font-size: 30px;
}
background-image as gradient can be just an image like in old days :
DEMO: