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>
Related
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 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>
HTML:
<div class="rectangle">Some text</div>
CSS:
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
}
Is there any way to make div looks like in the photo?
You can use ::after and ::before to achieve the result.
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
border-right: none;
position: relative;
}
/* for the triangular shape */
.rectangle::after {
content: "";
position: absolute;
right:-45px;
bottom: 0;
top:-5px;
width: 0;
height: 0;
border-left: 45px solid red;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
z-index:1000;
}
/* for hiding the portion except the border
of the triangle shape */
.rectangle::before {
content: "";
position: absolute;
right:-40px;
bottom: 0;
top:0;
width: 0;
height: 0;
border-left: 40px solid white;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
z-index:1001;
}
<div class="rectangle">Some text</div>
In case you don't need border like structure then you can avoid ::before portion and set background color to main div.
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
border-right: none;
position: relative;
background:red;
}
.rectangle::after {
content: "";
position: absolute;
right:-45px;
bottom: 0;
top:-5px;
width: 0;
height: 0;
border-left: 45px solid red;
border-top: 45px solid transparent;
border-bottom: 45px solid transparent;
}
<div class="rectangle">Some text</div>
For more shapes refer : CSS Tricks
To keep only the border without filling the div, You can try using ::before and ::after.
Something like this:
.rectangle {
width: 200px;
height: 40px;
position: relative;
border-top: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
margin-left: 50px;
}
.rectangle::after {
content: "";
position: absolute;
left: 100%;
width: 0;
height: 0;
top: 2px;
border-top: 18px solid transparent;
border-left: 10px solid #fff;
border-bottom: 17px solid transparent;
}
.rectangle::before {
content: "";
position: absolute;
left: 100%;
width: 0;
top: -2px;
height: 0;
border-top: 22px solid transparent;
border-left: 14px solid red;
border-bottom: 22px solid transparent;
}
<div class="rectangle">Some text</div>
Consider rotating a pseudo-element by declaring a transform: rotate() property value, as demonstrated in the code snippet embedded below.
As an alternative to achieving the same behaviour declaring border property rules, this method allows borders to be declared on the element in an intuitive manner using only one pseudo-element.
Rotating an element in this way also gives you the option to fill in the element with a solid colour - allowing you more freedom in customization.
Code Snippet Demonstration:
.rectangle {
width: 300px;
height: 80px;
border: 5px solid red;
/* additional */
border-right: 0;
box-sizing: border-box;
position: relative; /* required */
}
/* Additional */
.rectangle:after {
content: "";
position: absolute;
width: 55px;
height: 55px;
border-right: 5px solid red;
border-top: 5px solid red;
box-sizing: inherit;
right: -28px;
top: 7px;
transform: rotate(45deg);
}
<div class="rectangle">Some text</div>
Check CSS Shapes
#pointer {
width: 200px;
height: 40px;
position: relative;
background: red;
}
#pointer:after {
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#pointer:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
<div id="pointer">
</div>
you have to use the pseudo class after
.rectangle {
position: relative;
width:200px;
height:40px;
margin-left:40px;
color:#FFFFFF;
background-color:red;
text-align:center;
line-height:40px;
}
.rectangle:after {
content:"";
position: absolute;
left: 100%;
top:0px;
width:0px;
height:0px;
border-top:20px solid transparent;
border-left:40px solid red;
border-bottom:20px solid transparent;
}
<div class="rectangle">Some text</div>
You can do it using :before and :after
.rectangle {
width: 300px;
height: 80px;
border: 5px solid blue;
border-right: none;
position: relative;
}
.rectangle::before {
content: '';
border-top: 5px solid blue;
width: 120px;
position: absolute;
right: -115px;
bottom: 16px;
transform: rotate(-21deg);
}
.rectangle::after {
content: '';
border-top: 5px solid blue;
width: 120px;
position: absolute;
right: -115px;
top: 16px;
transform: rotate(21deg);
}
<div class="rectangle">Some text</div>
I have a simple div on a page:
<div>Some Text</div>
Is it possible with CSS, to make something like this:
You can use this code to make a similar arrow
<div class="arrow_box">Arrow</div>
.arrow_box {
position: relative;
background: #20d568;
border: 10px solid #ffffff;
}
.arrow_box:after, .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(32, 213, 104, 0);
border-left-color: #20d568;
border-width: 70px;
margin-top: -70px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 84px;
margin-top: -84px;
}
There is even a website to produce similar snippet like the one mentioned above.
Hope this helps!
Here is the CSS and HTML markup you need to create this effect in your own project.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>title</title>
<link>
<style type="text/css">
#base {
border: 3px solid #ccc;
background: red;
display: inline-block;
height: 30px;
position: relative;
width: 50px;
padding: 10px 0px 0px 10px;
}
#base:before {
border-bottom: 22px solid transparent;
border-left: 19px solid #ccc;
border-top: 22px solid transparent;
content: "";
height: 0;
right: -22px;
position: absolute;
top: -2px;
width: 0;
}
#base:after {
border-bottom: 20px solid transparent;
border-left: 17px solid red;
border-top: 20px solid transparent;
content: "";
height: 0;
right: -17px;
position: absolute;
top: 0px;
width: 0;
}
</style>
</head>
<body>
<div id="base" >
NEXT
</div>
</body>
</html>
HTML
<div class="textBox">
Text
</div>
CSS
body{
background:#000;
}
.textBox{
padding:10px;
background-color:green;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
border-left:5px solid #fff;
width:50px;
color:#fff;
position: relative;
}
.textBox::after{
content: '';
position: absolute;
width: 30px;
height: 29px;
background: green;
border-top: 5px solid #fff;
border-right: 5px solid #fff;
transform: rotate(45deg);
top: 2px;
right: -18px;
z-index: -1
}
Codepen : http://codepen.io/swapnaranjitanayak/pen/mOWrzX
Sure can using a couple of pseudo elements. Example:
<div class="arrowBox">Some Text</div>
then use the following CSS (note, I've used a red border as opposed to white so I could see it):
.arrowBox{
width: 100px;
height: 50px;
background: green;
border: 5px red solid;
display: block;
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
.arrowBox:before{
content: '';
width: 0;
height: 0;
position: absolute;
right: -34px;
top: -5px;
border-top: 30px solid transparent;
border-bottom:30px solid transparent;
border-left: 30px solid red;
z-index: -1;
}
.arrowBox:after{
content: '';
width: 0;
height: 0;
position: absolute;
right: -25px;
top: 0;
border-top: 25px solid transparent;
border-bottom:25px solid transparent;
border-left: 25px solid green;
}
Something for you to get started:
*{
box-sizing:border-box;
}
.wrapper{
border: 1px solid #ddd;
display:inline-block;
position:relative;
}
div.arrow {
height: 50px;
line-height: 50px;
width: 75px;
background: green;
position: relative;
text-align:center;
border: 1px solid #ddd;
margin: 10px;
color:white;
font-weight:bolder;
}
div.arrow:before {
content: '';
display: block;
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 0);
height: 0;
width: 0;
border-left: 25px solid green;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index:2;
}
div.arrow:after {
content: '';
display: block;
position: absolute;
right: -11px;
top: 50%;
transform: translate(100%, -50%);
height: 0;
width: 0;
border-left: 35px solid white;
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
z-index:1;
}
.wrapper:after {
content: '';
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translate(100%, -50%);
height: 0;
width: 0;
border-left: 36px solid #ddd;
border-top: 36px solid transparent;
border-bottom: 36px solid transparent;
}
<div class="wrapper">
<div class="arrow">Text</div>
</div>
please help to draw a pentagon means css.
I definitely need to pentagon could completely fill the text. The text should not extend beyond the pentagon (overflow:hidden).
html:
<div class="carousel_gallery" id="carousel_gallery">
укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>укукукБЮ<br>
</div>
css:
body{
position: relative;
}
.carousel_gallery {
width: 360px;
height: 365px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -185px;
border: 1px solid red;
overflow: hidden;
}
.carousel_gallery:before {
content: "";
width: 255px;
height: 255px;
margin-left: 52px;
margin-top: 237px;
position: absolute;
border-bottom: 1px solid red;
border-right: 1px solid red;
-webkit-transform: rotate(45deg);
background: white;
}
fiddle
customize this pentagon..hope this will help you!
<style type="text/css">
#pentagon {
margin:70px 0 5px 20px;
position: relative;
width: 110px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #abefcd transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px;
left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent #abefcd;
}
/* Content in pentagon */
#pentagon div{
position:absolute;
top:-50px;
}
</style>
<div id="pentagon"><div>you text</div></div>