I have to create a hexagon and I really want it to be full HTML and CSS. It is almost done, except the fact that it is not fully symmetric. The left corner is not aligned with the right corner.
The current css:
.hexagon.outer {
width: 318px;
height: 452px;
position: relative;
}
.hexagon.outer, .hexagon.outer:before, .hexagon.outer:after {
background-repeat:no-repeat;
background-color: #585858;
}
.hexagon.outer:before, .hexagon.outer:after {
content: "";
position: absolute;
width: 262px;
height: 262px;
top:95px;
-moz-transform: rotate(54.5deg) skew(22.5deg);
-webkit-transform: rotate(54.5deg) skew(22.5deg);
transform: rotate(54.5deg) skew(22.5deg);
}
.hexagon.outer:before {
left: -130px;
}
.hexagon.outer:after {
left: 186px;
}
.hexagon.outer span {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 55px;
background:#585858;
z-index: 1;
}
.hexagon.inner {
width: 276px;
height: 372px;
position: relative;
margin:0 auto;
top: 40px;
z-index:4;
}
.hexagon.inner, .hexagon.inner:before, .hexagon.inner:after {
background-repeat:no-repeat;
background-color: white;
}
.hexagon.inner:before, .hexagon.inner:after {
content: "";
padding:0;
margin:0;
position: absolute;
width: 215px;
height: 215px;
top:79px;
-moz-transform: rotate(54.5deg) skew(22.5deg);
-webkit-transform: rotate(54.7deg) skew(22.5deg);
transform: rotate(54.7deg) skew(22.5deg);
}
.hexagon.inner:before {
left: -107px;
}
.hexagon.inner:after {
left: 169px;
}
.hexagon.inner span {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 55px;
background:#585858;
z-index: 1;
}
The HTML:
<div class="hexagon outer">
<div class="hexagon inner">
</div>
</div>
Example: http://jsfiddle.net/jK7sH/
The outer hexagon will have an (background) effect in the end, that is why there are two (inner and outer).
I tried to align them by trial and error, but I don't think that works because the :before and :after rectangles are skewed.
Is it possible to create a symmetric hexagon with just CSS without the use of borders?
Thanks in advance for all information!
hexagone is 8 sides , isn't it ?
you could give a try with background linear-gradient
http://dabblet.com/gist/5767212
hover them to and see how it reacts while width increase.
Related
I need to create this custom shape with only CSS3.
Need to be with CSS, not svg.
I was trying to use the snippets of this link: Wave (or shape?) with border on CSS3 but i don't know how to manipulate shapes properly.
Also can be only the center shape! I'm testing with this pen: https://codepen.io/Blumenkranz/pen/vYEeLjr
#mixin push--auto {
margin: {
left: auto;
right: auto;
}
}
#mixin pseudo($display: block, $pos: absolute, $content: "") {
content: $content;
display: $display;
position: $pos;
}
.section {
width: 100%;
height: 50vh;
background: $blue-dark;
position:relative;
&::after, &::before {
#include pseudo;
#include push--auto;
bottom: -46px;
left: 35%;
width: 250px;
height: 150px;
background: $blue-dark;
border-radius: 100%;
}
}
I don't know why you want to make this using only css, as svg would be much simpler, but here you go. I made an approximation of your shape, which you can easily adjust, using a similar technique to the one you linked.
Here is the code. I'm using display flex on the body and margin auto on the container to position it in the center of the page for display purposes.
body {
display: flex;
height: 100vh;
}
.container {
margin: auto;
position: relative;
}
.shape {
width: 200px;
height: 200px;
background-color: #157995;
transform: rotate(45deg) skew(-10deg,-10deg);
clip-path: polygon(68% 100%, 100% 68%, 100% 100%);
border-radius: 15%;
}
.bar {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 12px;
background-color: #157995;
}
.container::before, .container::after {
content: "";
position: absolute;
width: 50px;
height: 20px;
background-color: white;
z-index: 1;
bottom: 0px;
}
.container::before {
left: 12.4px;
border-top-right-radius: 50%;
transform: skew(55deg);
}
.container::after {
right: 12.4px;
border-top-left-radius: 50%;
transform: skew(-55deg);
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="bar"></div>
<div class="shape"></div>
</div>
</body>
</html>
A little bit late to the party here, but this was my effort using:
a transparent container (with a visible top border)
two background-coloured pseudo-elements inside the transparent container
a slim horizontal rectangle; and
a circle
Working Example:
.line {
position: relative;
height: 30px;
border-top: 1px solid rgb(0, 123, 149);
overflow: hidden;
}
.circle {
position: absolute;
top: -80px;
left: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: rgb(0, 123, 149);
border-radius: 50%;
}
.rectangle {
position: absolute;
top: -1px;
left: calc(50% - 64px);
width: 128px;
height: 12px;
background-color: rgb(0, 123, 149);
}
.line::before,
.line::after {
content: '';
position: absolute;
top: -1px;
z-index: 24;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
}
.line::before {
left: calc(50% - 110px);
}
.line::after {
right: calc(50% - 110px);
}
<div class="line">
<div class="rectangle"></div>
<div class="circle"></div>
</div>
I have a banner that ends with a triangle(arrow) that has to stay centered vertically overlapping the slideshow below it. The amount of text/content that it will accept can grow dynamically. Is there a way to style this so that as the text increases the arrow will stay centered as you see below. Below is the styling that I have to achieve the screenshot below.
.carousel {
position: relative;
margin-top:3.5em;
padding-bottom:5%;
.header {
position: absolute;
top:-2em;
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
}
.headerWithTag {
position: absolute;
top:-3.5em;
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
&:after {
content: "";
background: url(/img/styleguide/masterslider/h1_right_top.svg) no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
}
}
}
React Component HTML:
{headerClass} = either .header or .headerWithTag depending if there is a subtitle(h3 tag).
<div className="carousel">
<div className={headerClass}>
<h1>{headerText}</h1>
<h3>{this.props.subTitle}</h3>
</div>
<div className="slideShow">
<div>
<div ref="wrapper" className="master-slider ms-skin-default" data-qa={thisName + '_masterslider'}>
{slides}
</div>
</div>
</div>
</div>
So the solution is to use top:0; transform: translate(0, -50%) to shift the header up half its height from the top of the slide:
.header {
position: absolute;
top: 0;
transform: translate(0,-50%);
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
}
.headerWithTag {
position: absolute;
top: 0;
transform: translate(0,-50%);
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
&:after{
content: "";
background: url(/img/styleguide/masterslider/h1_right_top.svg) no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
}
}
Quick demo: http://jsfiddle.net/7ky4wvz6/1/
I would like to know if it's possible to recreate the following image using css.
I am currently using it but in svg format.
Imagine this:
jsfiddle link
#circle {
background: #ccc;
border-radius: 50%;
/* Change these two equally to change circle size. Can be pixels, too. */
width: 25%;
padding-top: 25%;
height: 0;
position: relative;
}
.hand {
background: black;
width: 1px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
}
.hand:nth-child(2) {
transform: rotate(90deg);
}
.hand:nth-child(3) {
transform: rotate(45deg);
}
.hand:nth-child(4) {
transform: rotate(135deg);
}
#circle:after {
content: '';
display: block;
width: 80%;
height: 80%;
border-radius: 50%;
background: white;
position: absolute;
top: 10%;
left: 10%;
}
<div id="circle">
<div class="hand"></div>
<div class="hand"></div>
<div class="hand"></div>
<div class="hand"></div>
</div>
Or if you need the middle to be transparent (this is a little hacky, and you may have to modify it to fit your exact needs): https://jsfiddle.net/wdoe8r3m/1/
I have a fluid container which contains a number of absolutely positioned fluid divs. I want to use CSS3 transforms to move these on and off the page. The problem i am having is that when using transforms you either use exact pixel amounts or percentages of the element itself.
So you can see an example of the sort of thing i'm referring to (this is just a test example) at http://jsfiddle.net/K3uPY/
This is using a transform of 1000% to move them offscreen which is obviously not a good thing to do as if the display is massive it won't work and it means each div ends up a different distance from off the screen edge so the animations can end up taking quite a different amount of time to complete depending on their original size.
What i want to do it move them all just offscreen based on the viewport width/height (and the related direction).
This can easily be done by animating the top/left positions but this is obviously not optimal on all devices (see http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)
Is there anyway to do this using CSS3 transforms or even keyframes or am i stuck having to animate the left/top positions?
The CSS from the JSfiddle is:
html, body {height:100%; width: 100%; padding:0; margin:0;}
#wrapper {width: 100%; height: 100%; overflow: hidden;}
#container {width:50%; height: 50%; margin: auto; position: relative;}
#container div {
background-color: red;
position: absolute;
height: 25%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
border: 2px solid #000000;
-webkit-transition-duration: 600ms;
-moz-transition-duration: 600ms;
-o-transition-duration: 600ms;
transition-duration: 600ms;
cursor: pointer;
}
.zoomleft {
-webkit-transform:translate(-1000%);
-moz-transform:translate(-1000%);
-ms-transform:translate(-1000%);
-o-transform:translate(-1000%);
transform:translate(-1000%);
}
.zoomright {
-webkit-transform:translate(1000%);
-moz-transform:translate(1000%);
-ms-transform:translate(1000%);
-o-transform:translate(1000%);
transform:translate(1000%);
}
.zoomtop {
-webkit-transform:translate(0, -1000%);
-moz-transform:translate(0, -1000%);
-ms-transform:translate(0, -1000%);
-o-transform:translate(0, -1000%);
transform:translate(0, -1000%);
}
.zoombottom {
-webkit-transform:translate(0, 1000%);
-moz-transform:translate(0, 1000%);
-ms-transform:translate(0, 1000%);
-o-transform:translate(0, 1000%);
transform:translate(0, 1000%);
}
div.d1 {
width: 50%;
top: 0;
left: 0;
}
div.d2 {
width: 50%;
top: 0;
left: 50%;
}
div.d3 {
width: 25%;
top: 25%;
left: 0;
}
div.d4 {
width: 25%;
top: 25%;
left: 25%;
}
div.d5 {
width: 25%;
top: 25%;
left: 50%;
}
div.d6 {
width: 25%;
top: 25%;
left: 75%;
}
div.d7 {
width: 50%;
top: 50%;
left: 0;
}
div.d8 {
width: 50%;
top: 50%;
left: 50%;
}
div.d9 {
width: 50%;
top: 75%;
left: 0;
}
div.d10 {
width: 50%;
top: 75%;
left: 50%;
}
Thanks everyone,
Dave
Fortunately, since everything is fluid according to the viewport, you can still use percentages in the transform. See my Fiddle - http://jsfiddle.net/K3uPY/23/
One thing I did have to change was make sure #container was in the absolute center. I have also drastically simplified the JS and moved all of the positioning into the CSS.
HTML
<div id="wrapper">
<button id="movebtn">Move</button>
<div id="container">
<div class="box d1 active">1</div>
<div class="box d2 active">2</div>
<div class="box d3 active">3</div>
<div class="box d4 active">4</div>
<div class="box d5 active">5</div>
<div class="box d6 active">6</div>
<div class="box d7 active">7</div>
<div class="box d8 active">8</div>
<div class="box d9 active">9</div>
<div class="box d10 active">10</div>
</div>
</div>
JAVASCRIPT
$( "#movebtn" ).on('click', function() {
$('.box').toggleClass('active');
});
CSS
html,
body {
height:100%;
margin:0;
overflow: hidden;
width: 100%;
}
#wrapper {
height: 100%;
overflow: hidden;
width: 100%;
}
#container {
width: 50%;
height: 50%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
background-color: red;
border: 2px solid #000000;
box-sizing: border-box;
cursor: pointer;
height: 25%;
position: absolute;
transition-duration: 600ms;
}
.box.active {
transform: none;
}
.d1 {
width: 50%;
top: 0;
left: 0;
transform: translateY(-300%);
}
.d2 {
width: 50%;
top: 0;
left: 50%;
transform: translateY(-300%);
}
.d3 {
width: 25%;
top: 25%;
left: 0;
transform: translateX(-300%);
}
.d4 {
width: 25%;
top: 25%;
left: 25%;
transform: translateX(-400%);
}
.d5 {
width: 25%;
top: 25%;
left: 50%;
transform: translateX(400%);
}
.d6 {
width: 25%;
top: 25%;
left: 75%;
transform: translateX(300%);
}
.d7 {
width: 50%;
top: 50%;
left: 0;
transform: translateX(-200%);
}
.d8 {
width: 50%;
top: 50%;
left: 50%;
transform: translateX(200%);
}
.d9 {
width: 50%;
top: 75%;
left: 0;
transform: translateY(300%);
}
.d10 {
width: 50%;
top: 75%;
left: 50%;
transform: translateY(300%);
}
Here's an example as an image:
I want to style page elements like this using CSS, though. I can't seem to get it to work with border styles. Help appreciated.
You could also do it with two skewed pseudo-elements. Support is the same as for box-shadow: everything except IE8/7 and Opera Mini.
live demo
HTML:
<div class='box'></div>
CSS:
.box {
position: relative;
margin: 10em auto 0;
width: 20em; height: 20em;
background: dimgrey;
}
.box:before, .box:after {
position: absolute;
transform-origin: bottom right;
content: '';
}
.box:before {
top: 0; right: 100%; bottom: 0;
width: 4em;
background: darkgrey;
transform: skewY(45deg);
}
.box:after {
right: 0; bottom: 100%; left: 0;
height: 4em;
background: silver;
transform: skewX(45deg);
}