I need again help about create rounded caps on my element that have a gap.
I want to do something like this :
[rectange with gap and round cap][1]
[1]: https://i.stack.imgur.com/O781h.png
After some research and trying, I ended up doing this (e.g my code). I'm happy with it, but I'd like to create more aesthetic rounded caps like in my exemple. Can anyone help me, thank you in advance.
span {
font-size: 20px;
background: #fff;
position:absolute;
top: -20px;
right: 10px;
left: 10px;
padding:4px;
}
p{
border-radius: 25px;
width: 250px;
height: 150px;
border:10px solid #000;
background-color:white;
position:relative;
padding-top:15px;
}
<body class="container">
<!--///////////////////////////////// début header//////////////////////////// -->
<div id="box">
<p><span>Title will come here</span></p>
</div>
</body>
You can add some cricles to the ends of the lines. It may need slight adjusting.
span {
font-size: 20px;
background: #fff;
position: absolute;
top: -20px;
right: 10px;
left: 10px;
padding: 4px;
}
p {
border-radius: 25px;
width: 250px;
height: 150px;
border: 10px solid #000;
background-color: white;
position: relative;
padding-top: 15px;
}
p::after {
content: "";
position: absolute;
top: -9.3px;
left: 5px;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
z-index: 1;
}
p::before {
content: "";
position: absolute;
top: -9.3px;
left: 235px;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
z-index: 1;
}
<body class="container">
<!--///////////////////////////////// début header//////////////////////////// -->
<div id="box">
<span id="cap"></span>
<p><span>Title will come here</span></p>
</div>
</body>
Related
I'm trying to come up with a system where I can easily place a small circle at the top left and bottom right of a container element - an element that will be dynamic in size using flex or grid etc.
I managed to get the top-left circle appearing in the right place (c-tl) but I can't figure out how to get the bottom-right circle appearing at the other end of the border line.
I've tried messing around with different display types on different elements (e.g. the blue circle) and ::after selectors on various elements (e.g. the orange circle)... I'm sure there's an easy way but I'm certainly not a css expert!
.container {
margin: 0;
padding: 2rem;
}
.ele {
padding: 2rem;
border-bottom-left-radius: 1rem;
border-left: solid 1px grey;
border-bottom: solid 1px grey;
}
.c-tl {
height: 10px;
width: 10px;
border-radius:5px;
background-color: grey;
display: block;
position: relative;
top: 5px;
left: -5px;
}
.c-br {
height: 10px;
width: 10px;
border-radius:5px;
background-color: orange;
display: block;
}
.ele::after{
content: "";
height: 10px;
width: 10px;
border-radius:5px;
background-color: blue;
display: block;
}
<div class="container">
<span class="c-tl"></span>
<div class="ele">
<p>Hello, world!</p>
</div>
<span class="c-br"></span>
</div>
You can use position: absolute; with bottom: 0; and right: 0; to position the desired element on the bottom right corner of its parent element which must have position: relative;.
In your case:
the .c-tl and .c-br must be placed in .ele (the element relative which the circles are placed)
add position: relative; to .ele
add position: absolute; to both .c-tl and .c-br, and their corresponding top/bottom & left/right values set.
Reference (last example)
.container {
margin: 0;
padding: 2rem;
}
.ele {
padding: 2rem;
border-bottom-left-radius: 1rem;
border-left: solid 1px grey;
border-bottom: solid 1px grey;
position: relative;
}
.c-tl {
height: 10px;
width: 10px;
border-radius:5px;
background-color: grey;
display: block;
position: absolute;
top: -5px;
left: -5px;
}
.c-br {
height: 10px;
width: 10px;
border-radius:5px;
background-color: orange;
display: block;
position: absolute;
bottom: -5px;
right: -5px;
}
.ele::after{
content: "";
height: 10px;
width: 10px;
border-radius:5px;
background-color: blue;
display: block;
}
<div class="container">
<div class="ele">
<span class="c-tl"></span>
<p>Hello, world!</p>
<span class="c-br"></span>
</div>
</div>
I added the following to your c-br class.
float: right;
position: relative;
top: -5px;
right: -5px;
It seems to work in both views, including full screen.
.container {
margin: 0;
padding: 2rem;
}
.ele {
padding: 2rem;
border-bottom-left-radius: 1rem;
border-left: solid 1px grey;
border-bottom: solid 1px grey;
}
.c-tl {
height: 10px;
width: 10px;
border-radius: 5px;
background-color: grey;
display: block;
position: relative;
top: 5px;
left: -5px;
}
.c-br {
height: 10px;
width: 10px;
border-radius: 5px;
background-color: orange;
display: block;
float: right;
position: relative;
top: -5px;
right: -5px;
}
.ele::after {
content: "";
height: 10px;
width: 10px;
border-radius: 5px;
background-color: blue;
display: block;
}
<div class="container">
<span class="c-tl"></span>
<div class="ele">
<p>Hello, world!</p>
</div>
<span class="c-br"></span>
</div>
I would like to design a border like below picture. But I am running out of ideas about how to do it.
https://codepen.io/szn0007/pen/VRGPyE
div.about-me h2{
color: #000;
border-bottom: 1px solid #efefef;
width: 20%;
margin: 0 auto;
padding: 20px;
}
THank you in advance.
Luckily with CSS you have access to two pseudo elements on every container. I added the Asterix to one of the pseudo elements :after and the line to another :before.
For example:
.fancy-underline {
position: relative;
display: inline-block;
}
.fancy-underline:before {
content: '';
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 100%;
height: 1px;
background: grey;
}
.fancy-underline:after {
content: '*';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #fff;
}
<h2 class="fancy-underline">About Me</h2>
try this out:
<div class="about-me">
<h2>About Me</h2>
<p>*</p>
</div>
css:
div.about-me{
width: 100%;
text-align: center;
}
div.about-me h2{
color: #000;
border-bottom: 1px solid #efefef;
width: 20%;
margin: 0 auto;
padding: 20px;
}
p {
font-size: 50px;
transform: translatey(-72px);
}
I created a simple div for my comments section.
I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it look like a speech bubble coming from the left.
How can I achieve that without using an image ?
image
html
<div class='comment'></div>
css
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
Try this
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
position: relative;
background-color: #fff;
border:1px solid #000;
}
.comment::before{
content:"";
position: absolute;
top:20px;
left:-12px;
margin:auto;
height: 20px;
width: 20px;
border:1px solid #fff;
transform:rotate(45deg);
background-color: #fff;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
<div class='comment'></div>
style accordingly,
hope this helps...
I hope to help you:
.comment {
position: relative;
margin-left: 50px;
margin-top: 50px;
height: 50px;
display: inline-block;
width: 200px;
padding: 10px;
border-radius: 5px;
background: skyblue;
color: #FFF;
}
.comment:before, .comment:after {
content: '';
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
z-index: -1;
}
.comment:after {
background-color: #fff;
bottom: -30px;
left: 55px;
}
.comment:before {
background-color: skyblue;
bottom: -20px;
left: 70px;
}
<div class='comment'>Hello,World!</div>
I like Nicholas Gallagher's work best, see his demo page.
This is lifted off his page and is not my own work.
<style>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background:linear-gradient(#f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>
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>
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