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>
Related
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'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>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-color: #DDDDDD;
}
h1 {
color: #00BBFF;
font-family: "Lato", "Helvetica", "Futura", sans-serif;
text-align: center;
font-size: 30px;
margin-top: 10px;
margin-bottom: 10px;
}
#container {
width: 550px;
height: 550px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#cakeContainer {
width: 400px;
height: 400px;
border-radius: 100% / 50%;
background-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#top {
background-color: white;
border-bottom: 1px black solid;
width: 400px;
height: 70px;
border-radius: 100%;
padding-top: 100px;
}
#bottom {
background-color: white;
border-bottom: 1px black solid;
width: 400px;
height: 120px;
padding-top: 50px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-right: 1px solid black;
border-left: 1px solid black;
}
#middle {
background-color: white;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-bottom: 20px #FFFFCC solid;
width: 400px;
height: 100px;
padding-bottom: 50px;
border-right: 1px solid black;
border-left: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy Birthday!</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<link rel="shortcut icon" type="image/png" href="http://www.giftatonce.com/store/android/uploaded_files/1458668593_GCN07.png"/>
</head>
<body>
<h1>Happy Birthday Mom!</h1>
<div id="container">
<div id="cakeContainer">
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
</div>
</div>
</body>
</html>
I want to connect the 2nd div (#middle) to the bottom div (#bottom) , but there's still a small space on the sides of the middle div, making it look unappealing. Any help?
And any design advice would be nice :P
Check it.
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-color: #DDDDDD;
}
h1 {
color: #00BBFF;
font-family: "Lato", "Helvetica", "Futura", sans-serif;
text-align: center;
font-size: 30px;
margin-top: 10px;
margin-bottom: 10px;
}
#container {
width: 550px;
height: 550px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#cakeContainer {
width: 400px;
height: 400px;
border-radius: 100% / 50%;
background-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#top {
background-color: white;
border-bottom: 1px black solid;
width: 400px;
height: 70px;
border-radius: 100%;
padding-top: 100px;
}
#bottom {
background-color: white;
border-bottom: 1px black solid;
width: 400px;
height: 120px;
padding-top: 50px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-right: 1px solid black;
border-left: 1px solid black;
top: -79px;
position: relative;
z-index: 0;
}
#middle {
background-color: white;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-bottom: 20px #FFFFCC solid;
width: 400px;
height: 100px;
padding-bottom: 50px;
border-right: 1px solid black;
border-left: 1px solid black;
position: relative;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy Birthday!</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<link rel="shortcut icon" type="image/png" href="http://www.giftatonce.com/store/android/uploaded_files/1458668593_GCN07.png"/>
</head>
<body>
<h1>Happy Birthday Mom!</h1>
<div id="container">
<div id="cakeContainer">
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
</div>
</div>
</body>
</html>
You can try the following solution:
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-color: #DDDDDD;
}
h1 {
color: #00BBFF;
font-family: "Lato", "Helvetica", "Futura", sans-serif;
text-align: center;
font-size: 30px;
margin-top: 10px;
margin-bottom: 10px;
}
#container {
width: 550px;
height: 550px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#cakeContainer {
width: 400px;
height: 400px;
border-radius: 100% / 50%;
background-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border:1px solid black;
}
#top {
background-color: white;
border: 1px black solid;
width: 400px;
height: 70px;
border-radius: 100%;
padding-top: 100px;
margin-left:-1px;
}
#bottom {
background-color: white;
border-bottom: 1px black solid;
width: 400px;
height: 120px;
padding-top: 50px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-right: 1px solid black;
border-left: 1px solid black;
margin-left: -1px;
}
#middle {
background-color: white;
width: 400px;
height: 100px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-bottom: 20px #FFFFCC solid;
}
<h1>Happy Birthday Mom!</h1>
<div id="container">
<div id="cakeContainer">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
</div>
This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 6 years ago.
i'm making special boxes with shape like this, i don't know how to draw this with css
You can first create rectangle with border-radius and add triangle with :after pseudo-element.
.shape {
width: 200px;
height: 50px;
background: #B67025;
margin: 50px;
border-radius: 25px;
position: relative;
}
.shape:after {
content: '';
position: absolute;
border-style: solid;
right: 0;
top: 50%;
border-width: 10px 0 10px 10px;
transform: translate(80%, -50%);
border-color: transparent transparent transparent #B67025;
}
<div class="shape"></div>
Look here at the example Talk Bubble: https://css-tricks.com/examples/ShapesOfCSS/
and here'e the code:
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 50px
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent; }
<div id="talkbubble"></div>
SVG
Creating a complex shape is easier to do with a SVG then CSS:
svg {
/*For demonstration only*/
border: 1px solid black;
}
<svg width="300px" viewBox="0 0 200 100">
<path d="m50,10 95,0
a40 40 0 0 1 40,30
l10,10
l-10,10
a40 40 0 0 1 -40,30
h-95 a1 1 0 0 1 0,-80z" fill="rgb(182, 112, 37)"/>
</svg>
Impressed with the solution given by #Nenad Vracar
Here is another way of doing the same, may be helpful in understanding the CSS properties.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.main-div {
position: relative;
}
.first {
width: 150px;
height: 50px;
background: #B67025;
border-radius: 25px 0 0 25px;
float: left;
position: absolute;
top: 0;
}
.second {
width: 50px;
height: 50px;
background: #B67025;
border-radius: 0 25px 25px 0;
float: left;
position: absolute;
left: 150px;
}
.third {
position: absolute;
left: 197px;
top: 15px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #B67025;
}
</style>
</head>
<body>
<div class="main-div">
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
</div>
</body>
</html>
I have this code snippet but it's not working, the text is not showing inside the iframe.
body {
background-color: grey;
border: grey solid 1px;
}
p.para1 {
margin: auto;
width: 40%;
border: 3px solid black;
padding: 20px;
background-color: black;
color: white;
}
iframe.sidepanels1 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
right: 10px;
width: 320px;
height: 550px;
text-align: center;
}
iframe.sidepanels2 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
left: 10px;
width: 320px;
height: 550px;
}
p.iframe {
position: absolute;
top: 20px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css">
<body>
<center><p class="para1">This is a lot of shit to be written here<br> and this is just an example of this shit m8</p></center>
<iframe class="sidepanels1"><p class="iframe">Testing</p></iframe>
<iframe class="sidepanels2"><p class="iframe">Trying</p></iframe>
</body>
</head>
</html>
Why do you use iframe?
iframe is used to embedding another HTML page into the current page. Check this
Change iframe for div and it will work.
body {
background-color: grey;
border: grey solid 1px;
}
p.para1 {
margin: auto;
width: 40%;
border: 3px solid black;
padding: 20px;
background-color: black;
color: white;
}
div.sidepanels1 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
right: 10px;
width: 320px;
height: 550px;
text-align: center;
}
div.sidepanels2 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
left: 10px;
width: 320px;
height: 550px;
}
p.iframe {
position: absolute;
top: 20px;
text-align: center;
}
<center><p class="para1">This is a lot of shit to be written here<br> and this is just an example of this shit m8</p></center>
<div class="sidepanels1"><p class="iframe">Testing</p></div>
<div class="sidepanels2"><p class="iframe">Trying</p></div>
Also you cannot have the body inside the head.
You have to check the HTML basic structure and the tags meanings, .
You can add the HTML code you want to appear in the iframe as srcdoc
attribute.
body {
background-color: grey;
border: grey solid 1px;
}
p.para1 {
margin: auto;
width: 40%;
border: 3px solid black;
padding: 20px;
background-color: black;
color: white;
}
iframe.sidepanels1 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
right: 10px;
width: 320px;
height: 550px;
text-align: center;
}
iframe.sidepanels2 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
left: 10px;
width: 320px;
height: 550px;
}
p.iframe {
position: absolute;
top: 20px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
<center><p class="para1">This is a lot of shit to be written here<br> and this is just an example of this shit m8</p></center>
<iframe class="sidepanels1" srcdoc="fsfsfsfsaf"></iframe>
<iframe class="sidepanels2" srcdoc="safsdfsdfsf"></iframe>
</body>
</html>