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>
Related
Is it possible to make this shape in CSS3?
You can do something like this, using a pseudo selector of after.
CODEPEN LINK
CSS
div {
height: 200px;
background: blue;
position: relative;
width: 400px;
}
div:after {
content: '';
position: absolute;
top: -50px;
left: -200px;
border-top: 300px solid white;
border-left: 300px solid white;
width: 0;
background: #fff;
border-radius: 300px;
}
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>
Need help on how to put an arrow on each side of a box pointing outward.
I have the box and the basic CSS for an arrow I saw on another stack question.
Need help creating four arrows in that box
Im a java developer so this is not my cup of tea
Box:
#myBox {
width: 150px;
height: 150px;
background-color: grey;
border: 1px solid black;
}
/*Chevron*/
.Chevron {
position: relative;
display: block;
height: 50px;
/*height should be double border*/
}
.Chevron:before,
.Chevron:after {
position: absolute;
display: block;
content: "";
border: 25px solid transparent;
/*adjust size*/
}
/*Change four 'top' values below to rotate (top/right/bottom/left)*/
.Chevron:before {
top: 0;
border-top-color: #b00;
/*Chevron Color*/
}
.Chevron:after {
top: -50px;
/*adjust thickness*/
border-top-color: #fff;
/*Match background colour*/
}
<div id="myBox"></div>
<i class="Chevron"></i>
Since you are looking to interact with these shapes, you'd be better to go with a different approach to making your triangles, rather than a border hack.
.box {
height: 150px;
width: 150px;
background: lightgray;
position: relative;
}
.wrap {
position: absolute;
top: 0;
left: 25%;
height: 25%;
width: 50%;
overflow: hidden;
}
.touch {
position: absolute;
top: 0;
left: 50%;
height: 200%;
width: 200%;
transform: rotate(45deg);
transform-origin: top left;
background: gray;
cursor: pointer;
}
.wrap:nth-child(2) {
transform: rotate(90deg);
transform-origin: top left;
top: 25%;
left: 100%;
}
.wrap:nth-child(3) {
transform: rotate(180deg);
transform-origin: top left;
top: 100%;
left: 75%;
}
.wrap:nth-child(4) {
transform: rotate(-90deg);
transform-origin: top left;
top: 75%;
left: 0;
}
.touch:hover {
background: tomato;
}
<div class="box">
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
<span class="wrap"><span class="touch"></span></span>
</div>
i have used the nth-child in order to position the arrows correctly. I have also needed to used a wrapper div like in this answer as the border-hack won't work on a hit-test.
Use Css triangle. Do you need something like this?
For each side, use the code below to make a triangle:
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 100px 0;
border-color: transparent #007bff transparent transparent;
Here is a working demo.
I have managed to do this with 3 elements using CSS transforms and positioning. Is that what you were trying to achieve?
.container {
width: 100px;
height: 100px;
background: grey;
position: relative;
}
.container .triangles {
width: 70px;
height: 70px;
background: yellow;
transform: rotate(45deg);
position: absolute;
top: 15px;
left: 15px;
}
.container .triangles .box {
width: 50px;
height: 50px;
background: blue;
transform: rotate(-45deg);
position: absolute;
top: 10px;
left: 10px;
color: white;
}
<div class="container">
<div class="triangles">
<div class="box">
text
</div>
</div>
</div>
I want to design a button that looks like the one below:
I know it is a localized issue, but I can't seem to make it look like that without images
I have used both a :before and :after pseudo element in order to achieve and effect like this.
You could then use a combination of CSS transform properties. Something like a rotation with perspective should create the trapezium, and then use borders on another pseudo element to generate the lines.
A quick mockup demo would be:
.demowrapper {
margin: 0 auto;
height: 500px;
background: lightgray;
width: 300px;
box-shadow: 0 0 20px 5px dimgray;
position: relative;
}
button {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 30px;
background: tomato;
display: inline-block;
border: 0;
cursor: pointer;
}
button:before {
content: "";
position: absolute;
height: 20px;
width: 50px;
background: inherit;
top: -18px;
left: 50%;
border-radius: 5px 5px 0 0;
transform: translateX(-50%) perspective(50px) rotateX(45deg);
}
button:after {
content: "";
position: absolute;
height: 2px;
width: 40px;
border-top: 2px solid black;
border-bottom: 2px solid black;
top: -8px;
left: 50%;
transform: translate(-50%);
}
button:hover{
background:yellow;
<div class="demowrapper">
<button>SELECT your Button</button>
</div>
I am trying to create a design in which images are octagonal in shape. I used the border hack, but the image needs to be inside the octagon shape. Using pesudo-elements is not apt in this case as the body will also have its own background image. Is it possible with css?
My Code
div {
width: 100vh;
height: 100vh;
background: gold;
position: relative;
}
div:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29vh solid gold;
border-left: 29vh solid white;
border-right: 29vh solid white;
width: 42vh;
height: 0;
}
div:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29vh solid gold;
border-left: 29vh solid white;
border-right: 29vh solid white;
width: 42vh;
height: 0;
}
<div></div>
I wanted this image to be in the golden area : http://images.visitcanberra.com.au/images/canberra_hero_image.jpg . Also, i used vh so that it is responsive to window height.
Fiddle
With background image in fiddle: Fiddle
<div class='octa'></div>
CSS:
Use image as background like this: background-image: url('http://lorempixel.com/400/400/nature');
.octa {
height: 250px;
overflow: hidden;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
width: 250px;
}
.octa:after {
background-color:#cecece;;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.octa {
height: 100vh;
overflow: hidden;
position: absolute;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100vh;
}
.octa:after {
background-image: url(http://images.visitcanberra.com.au/images/canberra_hero_image.jpg);
background-position: center center;
background-size: auto 100vh;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
<div class='octa'></div>
What you need to do is to make a div inside your shape, that contains the picture. And then set the shape's overflow to hidden and background color to transparent, so that only the part of the picture thats inside the shape will show.
And then set the image's height and width to be equal to the div that contains it using this code
.pic img{
width:100%;
height:100%;
}
The final code will look something like this
<div>
<div class="pic">
<img src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg">
</div>
</div>
div {
width: 100vh;
height: 100vh;
background: transparent;
position: relative;
overflow:hidden;
}
.pic{
width:120vh;
height:120vh;
}
.pic img{
width:100%;
height:100%;
}
div:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29vh solid transparent;
border-left: 29vh solid #fff;
border-right: 29vh solid #fff;
width: 42vh;
height: 0;
}
div:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29vh solid transparent;
border-left: 29vh solid #fff;
border-right: 29vh solid #fff;
width: 42vh;
height: 0;
}
See it in action here