Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I just finished some courses in HTML and CSS, but I am clueless about how to create hexagons. I'm looking to create something like this using HTML and CSS:
This is what it looks like:
Thank you,Robert.
ps. I scored the web and stackoverflow, but did not find anything close.
All I found were big-huge hexagon grids, but any attempt to adjust resulted in loss of structure.
I would do something like this. Just see what I did with the middle and then apply that to the rest. Check out https://jtauber.github.io/articles/css-hexagon.html
.content {
width: 500px;
height: 500px;
background-color: #efefef;
z-index: 1;
}
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px;
}
.hex .top {
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex .middle {
width: 96px;
height: 60px;
background: transparent;
border: 4px solid #6C6;
}
.hex .bottom {
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex-row {
clear: left;
}
.hex-row.even {
margin-left: 53px;
}
<br/><br/>
<div class="content">
<div class="hex-row">
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>
</div>
</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am designing one card just like this.
I am wondering how to create a vertical line just below the circle as shown in the picture.
You can use CSS with position to achieve it along with ::before:
.circle {
width: 100px;
height: 100px;
border: 2px solid #ccc;
border-radius: 100%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
position: relative;
margin-top: 50px;
}
.circle:first-child {
margin-top: 0;
}
.circle::after {
position: absolute;
content: "";
display: block;
border: 2px solid #ccc;
left: 50%;
bottom: 100%;
height: 50px;
margin-left: -2px;
}
.circle:first-child::after {
display: none;
}
<div class="wrap">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
Preview
adjust the height and width of horizontal to be a vertical line using hr tag
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I had this structure and I want div "icon" to move dynamically when text is long
Any ideas ?
Thank you.
.tit {
display: table;
}
.icon {
border-top: 5px solid currentcolor;
border-right: 5px solid currentcolor;
min-width: 42px;
float: left;
height: 22px;
margin-top: -23px;
margin-left: 25px;
}
<div class="tit">Titleeeeeeeeeeeeeeeee</div>
<div class="icon"></div>
A wrapper as flexbox.
.wrapper {
display: flex;
}
.icon {
border-top: 5px solid currentcolor;
border-right: 5px solid currentcolor;
min-width: 42px;
height: 22px;
margin-left: -40px;
}
<div class="wrapper">
<div class="tit">Titleeeeeeeeeeeeeeeee</div>
<div class="icon"></div>
</div>
wrap the div class="tit" in div class="icon"
<div class="icon">
<div class="tit">Titleeeeeeeeeee</div>
</div>
jsfiddle example
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
.icon1 {
float: left;
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
.text1 {
float: right;
width: 0;
height: 0;
border-bottom: 100px solid transparent;
border-right: 100px solid red;
right: 50px solid red;
}
<div class="content">
<div class= "icon1"></div>
<div class= "text1"></div>
</div>
I want to make the text1 div expand to the right, I think a screenshot will help:
Can you guys help me? I want the left triangle to be a rectangle without the left-bottom-corner.
Not sure if this works for you, just hacked this together real quick:
.content {
overflow: hidden;
box-sizing: border-box;
display: inline-block;
height: 120px;
padding: 10px;
background: #fff;
}
.icon1 {
float: left;
}
.icon1::before {
content: " ";
float: left;
height: 0;
width: 0;
border-top: 100px solid transparent;
border-left: 100px solid #f00;
}
.icon1::after {
content: " ";
float: left;
width: 0;
height: 0;
margin-left: -70px;
border-right: 100px solid #f00;
border-bottom: 100px solid transparent;
}
.text1 {
float: left;
height: 100%;
padding: 0 1em;
line-height: 80px;
color: #fff;
background: #f00;
font-family: sans-serif;
font-weight: bold;
}
<div class="content">
<div class= "icon1"></div>
<div class= "text1"><p>I'm some text within a fancy box.</p></div>
</div>
Bazinga.
EDIT: Completely reworked this based on OP's newest picture reference. Didn't try it in any other browser, not sure if this will hold up well. Looking good for me on FF though.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have got an image. Recently I have used image for this. But I think css shape will be more good then using this shape. So can someone kindly tell me how to get this shape only in css. I don't want to use image here. Any help and suggestions will be really appreciable. Thanks...
The image is here
Created this using only HTML and CSS. DEMO
Inspiration from
http://css-tricks.com/examples/ShapesOfCSS/
HTML
<div>
<div id="triangle-topleft"></div>
<div id="triangle-topright"></div>
</div>
CSS
div{
float:left;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 80px solid transparent;
}
#triangle-topright {
width: 0;
height: 0;
margin-left:-5px;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
FIDDLE
Markup is <div></div>
css
div:before
{
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 40px 0 0;
border-color: #63071e transparent transparent transparent;
}
div:after
{
content: '';
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 40px 20px 0;
border-color: transparent #63071e transparent transparent;
margin-left: -6px;
}
.bottom {
width:50px;
border-bottom: 3em solid transparent;
border-left: 6.5em solid #efefef;
border-right: 6.5em solid #efefef;
border-top: 0;
}
FIDDLE DEMO
Was this googled??
Please see the following Link:
http://www.howtocreate.co.uk/tutorials/css/slopes
or atleast refer question asked here
Cut Corners using CSS
<style>
.triangle { width:0px;
border-bottom: 30px solid transparent;
border-left: 60px solid #FF0000;
border-right: 60px solid #FF0000;
border-top: 0; }
</style>
<div class="triangle"></div>
Demo here http://jsfiddle.net/EfxEj/
below is the basic idea. how to do it. however you can play with positioning or markup.
HTML
<div>
<span></span>
</div>
CSS
div {
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 50px solid transparent;
border-top: 20px solid #f00;
position:relative;
}
span {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 0 solid transparent;
border-top: 20px solid #f00;
position:absolute;
top:-20px;
left:50px;
}
I am very new to stackover flow so will take sometime to adjust to its editor so please overlook my way of presenting the answer.
CSS :
tri1{width: 0px;height: 0px;border-style: solid;border-width: 200px 200px 0 0;border-color: #007bff transparent transparent; }
tri2{padding-right:200px;margin-top:-200px;width: 0px;height:
0px;border-style: solid;border-width: 0 200px 200px 0;border-color:
transparent #007bff transparent transparent; }
now fix the height and width as per ur needs.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have this problem: i am not a design person. i just simply dont know how to make this arrow under the rectangle:
i tried to make a div with this background color and hang some image under it, but i am trying to do this for 2 hours now and i am totally stuck not finding a image tool which cuts out in triangle form. then i decided to do this thru css, but cannot somehow do it.
how can i do this triangle in css and hang to div? i want that if i resize window, the triangle should stick to div and doesnot move.
many many thanks for help in advance.
DEMO
HTML
<div class="arrow-down"></div>
css
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
Updated Demo
HTML
<div id="div1"><div class="arrow-down"></div></div>
css
#div1{
width:200px;
height:200px;
background-color:#f00;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
position:absolute; //added position:absolute
}
js
$(document).ready(function () {
$('.arrow-down').css('top', $('#div1').height() + 5).css('left', '20px');
});
or you can make use of :after only css effect
DEMO
HTML
<div>
<p>Testing triangle</p>
</div>
CSS
div {
margin: 50px;
padding: 10px 20px;
float: left;
background-color: #f00;
position: relative;
}
div:after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
content:"";
position: absolute;
bottom: -20px;
left: 20px;
}