I'm trying to recreate this exact flag of Saint Lucian. Although I can't figure out how to center the triangle, any help would be appreciated!
#charset "UTF-8";
.blue {
width: 400px;
height: 250px;
background-color: #9EC4E0;
position: absolute;
z-index: -1;
}
.triangle-up {
width: 0;
height: 50px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Saint Lucia</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="blue">
<div class="triangle-up"></div>
</div>
</body>
</html>
Math behind centering the logo
left:calc(300px - 200px/2);
top:calc(150px - 200px/2);
The above properties are given to .out(logo block) and the reason for those particular numbers.
Width logic
left:calc("move logo to half of flag width" - "width of triangle" / 2)
Height Logic
top:calc("move logo to half of flag height" - "height of triangle" / 2)
In whole, you just centered the logo in the middle of the flag.
Provided you know the width and height of the flag.
.arrow-up {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid white;
}
.arrow-up1 {
position: absolute;
width: 0;
height: 0;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-bottom: 190px solid black;
left: 10px;
top: 10px;
}
.arrow-up2 {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #f7d117;
top: 100px;
}
.out {
left: calc(300px - 200px/2);
top: calc(150px - 200px/2);
position: relative;
}
.flag {
position: relative;
background: #adcfe6;
height: 300px;
width: 600px;
}
<div class="flag">
<div class="out">
<div class="arrow-up"></div>
<div class="arrow-up1"></div>
<div class="arrow-up2"></div>
</div>
</div>
Centered triangles. Accomplished using three triangle divs:
#charset "UTF-8";
.blue {
width: 400px;
height: 250px;
background-color: #9EC4E0;
position: relative;
z-index: -1;
overflow: hidden;
}
.triangle-up {
left: 50%;
margin-left: -100px;
position: absolute;
width: 0;
height: 50px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid white;
}
.triangle-up2 {
left: 50%;
margin-left: -100px;
position: absolute;
content: '';
width: 0;
height: 70px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid black;
}
.triangle-up3 {
left: 50%;
margin-left: -100px;
position: absolute;
content: '';
width: 0;
height: 150px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 105px solid gold;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Saint Lucia</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="blue">
<div class="triangle-up"></div>
<div class="triangle-up2"></div>
<div class="triangle-up3"></div>
</div>
</body>
</html>
Related
I have parent and child div tag. I want to point arrow to child div tag from parent div tag.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#curves div {
width: 100px;
height: 100px;
border: 5px solid #999;
}
#curves.width div {
border-color: transparent transparent transparent #999;
}
#curve1 {
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 27px solid #ccc;
float: right;
margin-top: -7px;
margin-right: -26px;
}
</style>
</head>
<body>
<div id="curves" class="width"> parent
<div id="curve1"> child </div><span class="arrow-right"> </span>
</div>
</body>
</html>
No javascript, Learning to use arrow in css
I want to make like this image
Here is an arrow with pure CSS. Supported by all browsers.
.arrow {
width: 120px;
}
.line {
margin-top: 14px;
width: 90px;
background: blue;
height: 10px;
float: left;
}
.point {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
float: right;
}
<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>
As already mentioned, you can do it with pseudo-elements. Here's a way to do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parent {
display: inline-flex;
flex-direction: column;
width: 100%;
margin-bottom: 10px;
}
.children {
position: relative;
}
.children {
margin-left: 12px;
}
.parent .children:not(:last-of-type):before {
content: "";
width: 1px;
height: 100%;
background-color: #666;
top: 0;
left: -10px;
position: absolute;
}
.parent .children:last-of-type:before {
content: "";
width: 6px;
height: 10px;
border-left: 1px solid #666;
border-bottom: 1px solid #666;
border-radius: 0 0 0 6px;
top: 0;
left: -10px;
position: absolute;
font-size: 10px;
line-height: 19px;
}
.parent .children:last-of-type:after {
content: "";
width: 4px;
height: 0px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #666;
top: 5px;
left: -6px;
position: absolute;
}
</style>
</head>
<body>
<div class="parent">
Parent
<div class="children">child</div>
<div class="children">child</div>
</div>
<div class="parent">
Parent
<div class="children">child</div>
</div>
</body>
</html>
I'm trying to create an icon like this :
Here is my code :
<head>
<style type="text/css">
.dot {
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
border: 10px solid red;
}
.square {
height: 353.55px;
width: 353.55px;
background-color: #6a6;
display: inline-block;
}
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
</style>
</head>
<body>
<div class="dot"></div>
<div class="square"></div>
<div class="triangle"></div>
</body>
But what I'm getting is this :
How can I make them overlap ?
tried z-index : 1 and 2 and 3, doesn't work
Try this:
maybe this is not exactly what you are looking for, but it might help.
<head>
<style type="text/css">
.wrapper {
position: relative;
height: 500px;
width: 500px;
transform: scale(0.25)
}
.dot {
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
border: 10px solid red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square {
height: 353.55px;
width: 353.55px;
background-color: #6a6;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.triangle {
width: 0;
height: 0;
border-left: 51px solid transparent;
border-right: 51px solid transparent;
border-bottom: 85px solid blue;
position: absolute;
left: 50%;
top: 16%;
transform-origin: center;
transform: translateX(-50%) scale(9);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="triangle"></div>
<div class="dot"></div>
<div class="square"></div>
</div>
</body>
I believe that you are looking for something like this:
.dot {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
height: 332px;
width: 332px;
border-radius: 50%;
border: 10px solid red;
top: 148px;
left: 190px;
}
.square {
height: 235px;
width: 235px;
background-color: #6a6;
position: relative;
}
.square:after {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 0;
border-top: solid 110px white;
border-bottom: solid 110px white;
border-right: solid 110px white;
border-left: solid 110px white;
}
.triangle {
position: absolute;
height: 0;
width: 0;
display: flex;
justify-content: center;
align-items: center;
border-left: 358px solid transparent;
border-right: 358px solid transparent;
border-bottom: 500px solid blue;
z-index: -1;
}
.triangle::after {
content: '';
position: absolute;
top: 12px;
left: -340px;
width: 0;
border-bottom: solid 480px white;
border-right: solid 340px transparent;
border-left: solid 340px transparent;
}
<div class="triangle">
</div>
<div class="dot">
<div class="square"></div>
</div>
Use absolute positioning and reorder the divs. here is what I did, the sizes are wrong but they are overlapping:
<head>
<style type="text/css">
.dot {
height: 500px;
width: 500px;
border-radius: 50%;
display: inline-block;
border: 10px solid red;
position:absolute;
top: 140px;
left: 130px;
}
.square {
height: 353.55px;
width: 353.55px;
background-color: #6a6;
display: inline-block;
position:absolute;
top: 224px;
left: 214px;
}
.triangle {
width: 0;
height: 0;
border-left: 400px solid transparent;
border-right: 400px solid transparent;
border-bottom: 800px solid blue;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div class="triangle"></div>
<div class="dot"></div>
<div class="square"></div>
</body>
![Here is the result][1]
[1]: https://i.stack.imgur.com/85Ztd.png
I'm recreating the flag of Djibouti for an assignment although I'm encountering quite a lot of problems. First of all, I tried adjusting the size of the star and it was all so confusing. I need the star to be very small, while still holding its form. But I gave up so I then resulted to making the flag bigger, but the white triangle is clinging on to the top blue part of the flag so it looks a little odd. Also, the star is sticking to the white triangle.
All in all, this is very confusing and I'd really appreciate some help!
here's a picture of the flag
#charset "UTF-8";
.white {
width: 200px;
height: 100px;
left: px;
position: absolute;
z-index: -1;
}
.blue {
width: 300px;
height: 90px;
background-color: #27B6D6;
position: absolute;
z-index: -1;
}
.green {
width: 300px;
height: 180px;
background-color: #AEE749;
position: absolute;
z-index: -1;
}
.triangle-right {
border-top: 90px solid transparent;
border-left: 140px solid #fff;
border-bottom: 90px solid transparent;
border-left-width: 160px
}
.star-5-points {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 0;
height: 0;
margin: -120px 0;
border: 100px solid rgba(0,0,0,0);
border-top: 0 solid;
border-bottom: 70px solid red;
color: red;
transform: rotateZ(35deg) ;
}
.star-5-points::before {
width: 0;
height: 0;
position: absolute;
content: "";
top: -45px;
left: -65px;
border: 30px solid rgba(0,0,0,0);
border-top: 0 solid;
border-bottom: 80px solid red;
transform: rotateZ(-35deg) ;
}
.star-5-points::after {
width: 0;
height: 0;
position: absolute;
content: "";
top: 3px;
left: -105px;
border: 100px solid rgba(0,0,0,0);
border-top: 0 solid;
border-bottom: 70px solid red;
color: red;
transform: rotateZ(-70deg) ;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>DjiBouti</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="green"></div>
<div class="blue">
<div class="triangle-right"></div>
<div class="star-5-points"></div>
<div class="white"></div>
</div>
</body>
</html>
Wow that star is very finicky. Here's what I came up with:
#charset "UTF-8";
.white {
width: 200px;
height: 100px;
left: px;
position: absolute;
z-index: -1;
}
.blue {
width: 300px;
height: 90px;
background-color: #27B6D6;
position: absolute;
z-index: -1;
}
.green {
width: 300px;
height: 180px;
background-color: #AEE749;
position: absolute;
z-index: -1;
}
.triangle-right {
border-top: 90px solid transparent;
border-left: 140px solid #fff;
border-bottom: 90px solid transparent;
border-left-width: 160px
}
.star-5-points {
box-sizing: content-box;
width: 0;
height: 0;
margin: -96px 0;
border: 33px solid rgba(0,0,0,0);
border-top: 0 solid;
border-bottom: 19px solid red;
color: blue;
transform: rotateZ(32deg);
}
.star-5-points::before {
width: 0;
height: 0;
position: absolute;
content: "";
top: -13px;
left: -26px;
border: 13px solid rgba(0,0,0,0);
border-top: 0 solid;
border-bottom: 22px solid red;
transform: rotateZ(-35deg);
}
.star-5-points::after {
width: 0;
height: 0;
position: absolute;
content: "";
top: 1px;
left: -36px;
border: 29px solid rgba(0,0,0,0);
border-top: 0 solid;
border-bottom: 22px solid red;
color: red;
transform: rotateZ(-70deg);
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>DjiBouti</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="green"></div>
<div class="blue">
<div class="triangle-right"></div>
<div class="star-5-points"></div>
<div class="white"></div>
</div>
</body>
</html>
I have the following CSS and HTML to make a 'triangle' div:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
<div class="arrow-right">
<p>next</p>
</div>
The problem is I want to have text (one word) inside the div (center of the triangle) but it breaks the triangle and put beside it.
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
position:relative;
}
.arrow-right p{
position: absolute;
top: -24px;
left: -50px;
}
<div class="arrow-right">
<p>next</p>
</div>
Do you want this output?
You can put only this css in p tag:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p {
left: 20px;
position: absolute;
top: 40px;
}
<div class="arrow-right">
<p>next</p>
</div>
The simplest way to achieve this is by positioning the element relative to its original position
.arrow-right {
position: relative;
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p{
position: relative;
left: -50px;
top: -25px;
}
<div class="arrow-right">
<p>next</p>
</div>
Try with this below code...
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p{
position: absolute;
left: 15px;
top: 40px;
}
<div class="arrow-right">
<p> next </p>
</div>
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-right p {
position: relative;
left: -48px;
top: -26px;
}
<div class="arrow-right">
<p>next</p>
</div>
Otherwise you can do like this. Add position:relative css rule to .arrow-right then write css rules for '.arrow-right p' as position:absolute;left: 15px;top: 40px;
I am trying to create hexagon using image without set background image using css.
I tried below code where display perfect but its issue in email. Background image not set in email so need to remove from background and need to set any other way. I tried lots of different way to set but not succeed. As i am not designer so.
I used below code which done but not need to set any other way.
<div class="hexagon pic">
<span class="top"></span>
<span class="bottom"></span>
</div>
.hexagon {
background: url(http://placekitten.com/400/400/);
width: 400px;
height: 346px;
position: relative;
}
.hexagon span {
position: absolute;
display: block;
border-left: 100px solid red;
border-right: 100px solid red;
width: 200px;
}
.top {
top: 0;
border-bottom: 173px solid transparent;
}
.bottom {
bottom: 0;
border-top: 173px solid transparent;
}
Anyone have a idea.
Thanks
<div id="hexagon">
<img src="image.jpg">
</div>
//styles
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;}
#hexagon > img { height: inherit; width: inherit; }
This will do the work.