Create arrow in :after with inset border radius - html

I'm I'm trying to create an arrow which points to the top. The arrow is currently a basic CSS after pseudo class. However, I the left and right side of the arrow need to have some kind of "inset" border radius. Any ideas how to fix this?
Since this concerns an Electron menubar app, the outer part needs to be transparent.
This is what I currently came up with:
https://jsfiddle.net/xcpo1g2y/

This is maybe a start - but I'm using an extra element and it feels a bit hacky. The idea is to make the inverted border radius by having a large rectangle in the color you want, and you cover up the edges covered with shapes with border-bottom-right-radius and border-bottom-left-radius set.
I didn't round the top of the arrow, but that would certainly be possible by using your border radius and rotation transform approach.
body {
background: black;
}
.header {
background: rgba(235,238,243,1);
height: 40px;
width: 100%;
position: relative;
margin-top: 50px;
}
/* Left flange */
.header:before {
content: "";
position: absolute;
background: none;
bottom: 100%;
left: 50%;
border: 25px solid black;
border-bottom-right-radius: 25px;
transform: translateX(-137%);
z-index: 2;
}
/* Right flange */
.header:after {
content: "";
position: absolute;
background: none;
bottom: 100%;
left: 50%;
border: 25px solid black;
border-bottom-left-radius: 25px;
transform: translateX(37%);
z-index: 2;
}
/* Arrow base */
.header-helper {
background: white;
z-index: 1;
content: "";
position: absolute;
bottom: 100%;
left: 50%;
width: 100px;
height: 100px;
transform: translateX(-50%);
}
/* Up arrow */
.header-helper:before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border: 25px solid black;
border-bottom-color: transparent;
transform: translateX(-50%);
background: white;
margin-bottom: 8px;
z-index: 2;
}
<div class="header"><div class='header-helper'></div></div>

Related

underline with decreasing thickness style

Any idea how to implement this decreasing thickness underline using css:
(Example image)
I've tried to use border bottom, but couldn't give the decreasing thickness effect
You can use clip-path property. For more link
p {
position: relative;
font-size: 30px;
width: fit-content;
}
p span {
position: relative;
z-index: 2;
}
p:after {
background: orange;
clip-path: polygon(0 80%, 0% 100%, 100% 100%);
position: absolute;
width: 80%;
content: '';
height: 100%;
left: 0;
bottom: 0;
}
<p>
<span>Training & Development</span>
</p>
It's not just underline or border;
You should use :before in CSS and position: absolute; on it and position: relative; on the parent.
The code would be:
.underline {
position: relative;
font-size: 32px;
}
.underline:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 5px solid orange;
border-right: 300px solid transparent;
z-index: -1;
}
<span class="underline">Training & Development</span>
border-bottom: 5px <- here you can set the starting height of the underline.
border-right: 100px <- here you can set the width of the underline.
Read more about creating shapes in CSS here: https://css-tricks.com/the-shapes-of-css/

Custom CSS timeline with odd / even styling

I want to remove the first line from the CSS timeline I created, I just want the timeline circle to show up first not to have a line before it. I also want to style each dot different color, how can I do both these?
I have tried to add a class to one of the timeline containers called .not_complete but it doesnt change the color of the circle of the timeline.
/* The actual timeline (the vertical ruler) */
.timelinex {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 5em;
}
/* The actual timeline (the vertical ruler) */
.timelinex:before {
content: '';
position: absolute;
width: 0px;
background-color: #fff;
top: auto;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.timelinex::after {
content: '';
position: absolute;
width: 4px;
background-color: #e3e3e3;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.containerx {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.containerx::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
right: -5px;
background-color: #e3e3e3;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.containerx::after .not_complete {
background-color: #e3e3e3 !important;
}
/* Place the container to the left */
.leftx {
left: 0;
}
/* Place the container to the right */
.rightx {
left: 50%;
}
/* Fix the circle for containers on the right side */
.rightx::after {
left: -7px;
}
/* The actual content */
.contentx {
padding: 2px 3px;
position: relative;
border-radius: 6px;
}
<div class="timelinex">
<div class="containerx leftx not_complete">
<div class="contentx">
<p>
<img src="assets/img/therapist1.jpg" style="border-radius: 0.5em;border-top-left-radius: 120px; border-bottom-right-radius: 120px">
</p>
<h5 style="color:#999;font-style: 0.5em"> DAY 1 </h5>
<div> Test Timeline Step 1</div>
</div>
</div>
</div>
The selector here is invalid:
.containerx::after .not_complete {
It would select the child of the ::after pseudo element. You need to use:
.containerx.not_complete::after {
The above selector selects any element's ::after pseudo element, with the classes containerx and not_complete. So kindly replace your code with:
.containerx.not_complete::after {
background-color: #e3e3e3 !important;
}
Hope this solves your issue.
Complete Snippet
/* The actual timeline (the vertical ruler) */
.timelinex {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 5em;
}
/* The actual timeline (the vertical ruler) */
.timelinex:before {
content: '';
position: absolute;
width: 0px;
background-color: #fff;
top: auto;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.timelinex::after {
content: '';
position: absolute;
width: 4px;
background-color: #e3e3e3;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.containerx {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.containerx::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
right: -5px;
background-color: #e3e3e3;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.containerx.not_complete::after {
background-color: #e3e3e3 !important;
}
/* Place the container to the left */
.leftx {
left: 0;
}
/* Place the container to the right */
.rightx {
left: 50%;
}
/* Fix the circle for containers on the right side */
.rightx::after {
left: -7px;
}
/* The actual content */
.contentx {
padding: 2px 3px;
position: relative;
border-radius: 6px;
}
<div class="timelinex" >
<div class="containerx leftx not_complete">
<div class="contentx">
<p><img src="assets/img/therapist1.jpg" style="border-radius: 0.5em;border-top-left-radius: 120px; border-bottom-right-radius: 120px"></p>
<h5 style="color:#999;font-style: 0.5em"> DAY 1 </h5>
<div> Test Timeline Step 1</div>
</div>
</div>
</div>
Update: For Even / Odd Styling and First Child.
To create odd and even styling, you need to use :nth-child() selector. An example of having it blue and red is here:
li {
display: block;
width: 200px;
padding: 10px;
color: #fff;
}
li:nth-child(odd) {
background: #00f;
}
li:nth-child(even) {
background: #f00;
}
li:first-child {
background: #000;
font-weight: bold;
}
<ul>
<li>First Child</li>
<li>Even</li>
<li>Odd</li>
<li>Even</li>
<li>Odd</li>
</ul>

I need to draw 2 circles connected with line ? In css only

I need to draw 2 circle connected with css so that i will use flight search website if you can let me get you answer this is what i want
pure css or materializecss thanks
This is the general idea using a single element and pseudo elements for the circles. Position them over the line, and use a background color in the circle that matches the background of the page
body {
padding: 2em;
}
div {
background: blue;
height: 1px;
position: relative;
}
div:before, div:after {
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
content: '';
height: 1em; width: 1em;
border: 1px solid blue;
border-radius: 50%;
background: #fff;
}
div:after {
left: auto;
right: 0;
}
<div></div>
Or you can position the circles outside of the parent element instead of using a background image.
body {
padding: 2em;
}
div {
background: blue;
height: 1px;
position: relative;
}
div:before, div:after {
position: absolute;
top: 50%; left: 0;
transform: translate(-100%,-50%);
content: '';
height: 1em; width: 1em;
border: 1px solid blue;
border-radius: 50%;
}
div:after {
left: auto;
right: 0;
transform: translate(100%,-50%);
}
<div></div>

Creating a div with a pointed side

I want to create a div with an image and text in it that looks like this.
I've managed to get something that looks like this here:
JSFiddle of pointed div
.triangle-down {
background: white;
display: inline-block;
height: 125px;
margin-left: 20px;
margin-bottom: 55px;
position: relative;
width: 200px;
cursor: pointer;
border: red solid 2px;
}
img {
margin: 10px;
}
.triangle-down:before {
border-top: 20px solid red;
border-left: 101px solid transparent;
border-right: 101px solid transparent;
content: "";
height: 0;
left: -1px;
position: absolute;
top: 127px;
width: 0;
}
.triangle-down:after {
border-top: 20px solid white;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: 125px;
width: 0;
}
<div class="triangle-down">
<img src="http://placehold.it/180x105">
</div>
The issues I have are:
(1) The curser turns to a pointer outside the shape when it crosses the transparent borders that help create the point. I'd prefer it if the pointer appeared only when inside the visible outline of the shape.
(2) Is there a better way of doing this? I looked at trying to rotate a div to create the point as I thought this would solve the pointer issue but I can't work out how to create an isosceles triangle shape with the correct proportions this way. This would also allow me to apply a border to create the outline rather than overlay two triangles as I have in the JSFiddle. See this post for more on this - Speech bubble with arrow
Here is a version using transform: rotate
/*Down pointing*/
.triangle-down {
background: white;
display: inline-block;
height: 125px;
margin-left: 20px;
margin-bottom: 55px;
position: relative;
width: 200px;
cursor: pointer;
border: red solid 2px;
}
img {
position: relative;
margin: 10px;
z-index: 1
}
.triangle-down:before,
.triangle-down:after {
border-bottom: 2px solid red;
background: white;
content: '';
height: 50px;
left: 5px;
position: absolute;
top: 98px;
width: 54%;
transform: rotate(22deg);
z-index: 0;
}
.triangle-down:after {
left: auto;
right: 5px;
transform: rotate(-22deg);
}
<div class="triangle-down">
<img src="http://placehold.it/180x105">
</div>

How to make a horizontal border with circles on each end

I need to make a border like this image
Anyone have an idea to make it?
I tried with :after and :before attributes of css but with no sucess.
The html tag is a h1 that needs that kind of border on the bottom. Is it possible to make it?
pseudo-elements!
div {
border-bottom: 2px solid black;
padding-bottom: 15px;
position: relative;
}
div:before,
div:after {
position: absolute;
bottom: -6px;
left: 0;
height: 10px;
width: 10px;
background: black;
content: "";
border-radius: 5px;
}
div:after {
right: 0;
left: auto;
}
Fiddle: http://jsfiddle.net/GVb59/