It is a curved div basically:
So it is possible to do with just CSS and no images?
Well... I was the biggest skeptic of this shape, but it seems it is possible O_o
Demo
HTML
<div class="shape one"></div>
<div class="shape two"></div>
<div class="shape three"></div>
CSS
.shape
{
background:red;
float:left;
}
.one
{
border-width:0px;
border-bottom:10px solid red;
border-left:200px solid #fff;
width:0px;
}
.two
{
width:200px;
height:40px;
clear:left;
}
.three
{
border-width:0px;
border-top:50px solid red;
border-right:10px solid #fff;
width:0px;
margin-top:-10px;
}
The border method looks grainy in the browsers I tested. Here's a method using the ::before and ::after pseudo-elements and CSS transform: skew() that looks smoother. You can adjust the angles as needed. This uses only one <div>.
Demo:
Output:
HTML:
<div class="quadrilateral"></div>
CSS:
.quadrilateral {
background-color: red;
height: 50px;
margin: 50px;
position: relative;
width: 300px;
}
.quadrilateral::before {
background-color: red;
content: '';
display: inline-block;
height: 61px;
position: absolute;
right: -3px;
top: -11px;
transform: skewX( -5deg );
-ms-transform: skewX( -5deg );
-webkit-transform: skewX( -5deg );
-o-transform: skewX( -5deg );
-moz-transform: skewX( -5deg );
width: 10px;
}
.quadrilateral::after {
background-color: red;
content: '';
display: inline-block;
height: 15px;
position: absolute;
top: -6px;
transform: skewY( -2deg );
-ms-transform: skewY( -2deg );
-webkit-transform: skewY( -2deg );
-o-transform: skewY( -2deg );
-moz-transform: skewY( -2deg );
width: 300px;
}
Instead of CSS, consider using SVG. It's supported in all major browsers and that shape would be very very small in SVG format. It also would be in your DOM tree so you could bind events on it.
Related
I want to make cross sign (X) in a red circle.
Here is my try:
.crosssign {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.crosssign_circle {
position: absolute;
width:22px;
height:22px;
background-color: red;
border-radius:11px;
left:0;
top:0;
}
.crosssign_stem {
position: absolute;
width:3px;
height:9px;
background-color:#fff;
left:11px;
top:6px;
}
.crosssign_stem2 {
position: absolute;
width:3px;
height:9px;
background-color:#fff;
right:11px;
top:6px;
}
But it looks like this:
So how can I place the stem in the right order to make the X sign?
And the HTML is also here:
<span class="crosssign">
<div class="crosssign_circle"></div>
<div class="crosssign_stem"></div>
<div class="crosssign_stem2"></div>
</span>
One of the reason why your stems are not appearing as they should is because you forgot to add position: relative to the parent .crosssign element. There is an easier way to get about this:
Use the top: 50%; left: 50%; transform: translate(-50%, -50%) trick to vertically and horizontally center the stems
Ensure that stem and stem2 have their width and height flipped (so that they appear 90deg rotated relative to each other)
Apply transform: rotate(45deg) on the parent element
Moreover, you do not need to add vendor prefixes to CSS transform: all browsers today (even IE11) supports the unprefixed version.
Here is a proof-of-concept example:
.crosssign {
display: inline-block;
width: 22px;
height: 22px;
position: relative;
transform: rotate(45deg);
}
.crosssign_circle {
position: absolute;
width: 22px;
height: 22px;
background-color: red;
border-radius: 11px;
left: 0;
top: 0;
}
.crosssign_stem,
.crosssign_stem2 {
position: absolute;
background-color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.crosssign_stem {
width: 3px;
height: 9px;
}
.crosssign_stem2 {
width: 9px;
height: 3px;
}
<span class="crosssign">
<div class="crosssign_circle"></div>
<div class="crosssign_stem"></div>
<div class="crosssign_stem2"></div>
</span>
With a shorter code you could obtain the same result using a pseudoelement containing the unicode symbol U+00D7
.crosssign {
display: inline-grid;
place-content: center;
aspect-ratio: 1;
min-inline-size: 1.25em;
border-radius: 50%;
background-color: #d12021;
}
.crosssign::before {
content: "\D7";
color: #fff;
font-weight: bold;
}
<span class="crosssign"></span>
I'd suggest you use flexbox to center the items in the circle. And then rotate both stems. Also, you can use the same class for both stems, so css is lighter. Here's the code
.crosssign {
display:flex;
justify-content: center;
align-items: center;
width: 22px;
height:22px;
background-color: red;
border-radius:11px;
}
.crosssign_stem {
position: absolute;
width:4px;
height:11px;
background-color:#fff;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.crosssign_stem.right {
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
<span class="crosssign">
<div class="crosssign_stem"></div>
<div class="crosssign_stem right"></div>
</span>
Cheers!
I need to style a horizontal line <hr> like the picture attached. Is there any way to do this with pure css that would also work in IE8?
EDIT: Sorry, I missed your IE8 requirement...this probably won't work there. I apologize. I don't have access to it to check.
You can use the :before and create a box, rotate it, apply some border, absolutely position it and voila, there you have it:
http://jsfiddle.net/v7y1bp9s/1/
HTML:
<div class="container">
<hr class="line"></hr>
</div>
CSS:
.container {
float: left;
width: 100%;
height: 50px;
background-color: #1978a4;
line-height: 50px;
}
hr.line {
border-color: #fff;
position: relative;
}
hr.line:before {
content: '';
height: 10px;
width: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 50px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-color: #1978a4;
top: -5px;
}
To create this effect:
It is possible or would I need to design it with software?
You could use gradient as background
div {
background: -moz-linear-gradient(-45deg, #1e5799 50%, #207cca 50%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#1e5799), color-stop(50%,#207cca), color-stop(100%,#7db9e8));
...
}
An example : http://jsfiddle.net/w9fYj/
You can do it with triangles (which basically works on border adjustments) How do CSS triangles work?
And other shapes for more
Here is extensive example with transforms of many divisions which may interest you.
Demo
HTML
<div class="wrapper">
<div class="shape3">
<div class="shape3-content">Hi there!</div>
</div>
<div class="shape1">
<div class="shape1-content">Hi there!</div>
</div>
<div class="shape2">
<div class="shape2-content">Hi there!</div>
</div>
</div>
css
.wrapper {
border: 1px solid #ff8888;
height: 480px;
left: 50%;
margin: -240px 0 0 -320px;
overflow: hidden;
position: absolute;
top: 50%;
width: 640px;
}
.shape1 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid black;
height: 50%;
left: -25%;
position: absolute;
top: 70%;
width: 150%;
}
.shape1-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
padding-left: 230px;
}
.shape2 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid #88ff88;
bottom: 244px;
height: 100%;
position: absolute;
right: 50%;
width: 100%;
}
.shape2-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
bottom: 10px;
position: absolute;
right: 10px;
}
.shape3 {
background:red;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
border: 1px solid #8888ff;
bottom: 40%;
height: 100%;
position: absolute;
right: 20%;
width: 100%;
}
.shape3-content {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
bottom: 50%;
position: absolute;
right: 10px;
}
Here it is using pure CSS:
HTML
<div id="test">
</div>
CSS
#test {
widh:300px;
height:150px;
background:#C3C3C3;
position:relative;
overflow:hidden;
}
#test:after {
content:'';
position:absolute;
right:-100px;
top:10px;
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
width:500px;
height:250px;
background:#880015;
}
And here is a FIDDLE
If you consider to support old browsers without using CSS3 then:
HTML
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
CSS
.wrapper {
width: 400px;
height: 100px;
}
.left {
display: inline;
float: left;
background-color: #ccc;
width: 100px;
height: 100px;
}
.right {
display: inline;
float: right;
background-color: #610A0A;
width: 200px;
height: 100px;
}
.middle {
float:left;
display: inline;
line-height: 0%;
width: 0px;
border-top: 100px solid #ccc;
border-right: 100px solid #610A0A;
}
Fiddle Demo
How can I vertically stack more than one element when using rotate without having to resort to statically fixing the spacing (in my case using pixel-width from bottom) between the elements?
Here's my current HTML and CSS/SASS:
HTML:
<div class="results-indicator-container">
<div class="results-indicator-label-won">5x</div>
<div class="results-indicator-label-lost">5x</div>
<div class="results-indicator-label-tied">5x</div>
</div>
CSS/SASS:
.results-indicator-container {
bottom: 51px;
height: 59px;
left: 167px;
position: relative;
width: 16px;
font-size: 12px;
float: left;
.results-indicator-label {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position: absolute;
bottom: 0px;
}
.results-indicator-label-won {
#extend .results-indicator-label;
}
.results-indicator-label-lost {
#extend .results-indicator-label;
bottom: 25px;
}
.results-indicator-label-tied {
#extend .results-indicator-label;
bottom: 50px;
}
}
Here's a screenshot of what my vertically stacked elements currently look like.
here is a jsFiddle,
please let me know what you think.
.results-indicator-container {
height: 59px;
left: 167px;
width: 16px;
font-size: 12px;
float: left;
}
.results-indicator-label {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
float:left;
clear:left;
height:20px;
width:20px;
border-bottom: 1px solid #CCC;
}
.won{
}
.lost{
}
.tied{
}
<div class="results-indicator-container">
<div class="results-indicator-label won">5x</div>
<div class="results-indicator-label lost">5x</div>
<div class="results-indicator-label tied">5x</div>
</div>
I'd like to create a CSS button in the shape of a hexagon using a single div to keep the markup clean. I've been experimenting with before and after pseudo elements and can do it with the hexagon 'points' at top and bottom but would like to do it with them pointing left and right to fit the rest of my theme. I've got close but I can't get the after pseudo element where I want it. Can anyone fix this?
Here's where I'm up to:
#hex {
background-color:green;
width:100px;
height:100px;
float:left;
display:block;
}
#hex::before {
content:"";
border-top:50px solid red;
border-bottom:50px solid red;
border-right:30px solid blue;
float:left;
}
#hex::after {
content:"";
border-top:50px solid red;
border-bottom:50px solid red;
border-left:30px solid blue;
float:left;
}
and there's a JS Fiddle at http://jsfiddle.net/higginbottom/YKx2M/
try this example: http://jsbin.com/ipaked/6
(tested on Fx and Chrome)
relevant CSS
.hexagon {
position: relative;
width: 124px;
height: 100px;
background: #d8d8d8;
}
.hexagon:after,
.hexagon:before {
position: absolute;
content: "";
z-index: 1;
top: 0;
width: 0px;
background: #fff;
border-top: 50px transparent solid;
border-bottom: 50px transparent solid;
}
.hexagon:before {
left: 0;
border-right: 30px #d8d8d8 solid;
}
.hexagon:after {
right: 0;
border-left: 30px #d8d8d8 solid;
}
(Adjust border-width and size of the hexagon so it can look as you prefer.)
As alternative you can also use a single pseudoelement in which you could show the black hexagon unicode character U+2B21, like in this example: http://jsbin.com/ipaked/7
CSS
.hexagon {
position: relative;
width: 120px;
height: 100px;
line-height: 100px;
text-align: center;
}
.hexagon:before {
position: absolute;
content: "\2B21";
font-size: 160px;
z-index: 1;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
This is probably a better choice (if using a relative font size) so the hexagon can adjust itself when the user increase or decrease the base font-size on his browser.
I'm using clip-path:
.btn {
display: inline-block;
text-align: center;
text-decoration: none;
vertical-align: middle;
user-select: none;
padding: 0.375rem 2rem;
--btn-raise: 1rem;
clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
background-color: #fefd64;
text-transform: uppercase;
}
<a class="btn" href="/call">Call call</a>
Try This codepen link http://codepen.io/bherumehta/pen/egdXLv or http://codepen.io/bherumehta/pen/VPKRBG
.hexa{
width:300px;
background:red;
height:70px;
color:#fff;
postion:relative;
border-top:1px solid red;
border-bottom:1px solid red;
}
.hexa-inner{
height:70px;
position:relative;
}
.hexa-inner{
height:70px;
position:relative;
}
.hexa-inner:before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 50px;
background: red;
-webkit-transform: skew(-45deg, 0deg);
-moz-transform: skew(-45deg, 0deg);
-ms-transform: skew(-45deg, 0deg);
-o-transform: skew(-45deg, 0deg);
transform: skew(-45deg,0deg);
}
.hexa-inner:after {
content: '';
position: absolute;
top: 50%;
left: 0;
height: 50%;
width: 50px;
background: red;
-webkit-transform: skew(-135deg, 0deg);
-moz-transform: skew(-135deg, 0deg);
-ms-transform: skew(-135deg, 0deg);
-o-transform: skew(-135deg, 0deg);
transform: skew(-135deg, 0deg);
}
.left-arrow{
margin-left:-18px;
float:left;
}
.right-arrow{
transform:rotate(180deg);
float:right;
margin-right:-18px
}
.hexa p{
white-space:nowrap;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
}
HTML
<div class="hexa">
<div class="hexa-inner left-arrow"> </div>
<div class="hexa-inner right-arrow"> </div>
<p>hexagonhexagonhexagonhexagonhexagonhexagonhexagonhexagonhexago
xagonhexagonhexagonhexagonhexagonhexagonhexagon</p>
</div>