I would like this square and triangle, shown on the link at 100% page width (responsive).
http://www.jsfiddle.net/webtiki/x9cxz423/199/
.btn {
position: relative;
display: inline-block;
height: 50px; width:50%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom:15%;
background-clip:content-box;
overflow:hidden;
}
.btn:after {
content: "";
position: absolute;
top:50px; left: 0;
background-color:inherit;
padding-bottom:50%; width:57.7%;
z-index:-1;
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);;
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body{background: url('http://lorempixel.com/output/people-q-c-640-480- 1.jpg');background-size:cover;}
I can't seem to get it work at all, can anyone help me out please?
Thank you
Luke
I've fixed your code, now is responsive too!
.btn {
position: relative;
display: inline-block;
height: 50px;
min-width:100%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom:30%;
background-clip:content-box;
overflow:hidden;
}
.btn:after {
content: "";
position: absolute;
top:50px; left: 0;
background-color:inherit;
padding-bottom:50%; width:57.7%;
z-index:-1;
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);;
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body{background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');background-size:cover;}
Hello!
Related
I'm working with the slick slider. And I have two images: prev.png and next.png, but it won't work. I tried various other things, but its not working.
And I have this error message in the Web Inspector Console:
jquery.min.js:2 GET file:///C:/Users/DELL/Desktop/07%20CITEC%20Site/common/js/lightbox/img/next.png net::ERR_FILE_NOT_FOUND
This the result and the arrow is just > in .slick-next:before. I will remove it after its okay.
Image Arrow
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev
{
left: 30px;
width:71px;
height:43px;
z-index: 100;
background: url(common/js/lightbox/img/prev.png) no-repeat center;
background-size:71px 45px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '<';
}
[dir='rtl'] .slick-prev:before
{
content: '>';
}
.slick-next
{
right: 30px;
width:71px;
height:45px;
z-index: 100;
background: url(common/js/lightbox/img/next.png) no-repeat center;
background-size:71px 45px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '>';
}
[dir='rtl'] .slick-next:before
{
content: '<';
}
I assume it that my file slick-theme.css is with the index.html .So I use common/js/lightbox/img/prev.png
But when I observe my folder the path is like this
So I tried to get the image outside the css folder and use this background: url(../img/next.png);
This question already has answers here:
CSS3 Transform Skew One Side
(5 answers)
Closed 2 years ago.
I'm tying to get a result as this image :
I tried that :
#parallelogram-container {
margin: 0 50px;
}
.parallelogram {
background: #008dd0;
width: 200px;
border: none;
display: inline-block;
height: 90px;
-moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform-origin: 50% 50%;
padding: 0px;
margin: 0 1px;
}
.parallelogram:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.parallelogram-btn {
width: 60px;
background: #ffa008;
color: #FFF;
border: none;
display: inline-block;
height: 90px;
-moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
transform-origin: 50% 50%;
padding: 0px;
margin: 0px;
font-weight: 700;
cursor: pointer;
}
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
I cannot achieve this like the image : first parallelogram not skrewed on his left side and last parallelogram not skrewed on his right side.
Can someone help me please ?
See Snippet
#parallelogram-container {
margin: 0 50px;
}
.parallelogram {
position: relative;
background: #008dd0;
width: 100px;
border: none;
display: inline-block;
height: 90px;
padding: 0px;
margin: 0 1px;
}
.parallelogram:nth-child(1) {}
.parallelogram:nth-child(2) {
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
margin-left: 1px;
}
.parallelogram:nth-child(1):after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #008dd0;
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}
.parallelogram-btn:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
left: -51px;
z-index: -1;
background: #ffa008;
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}
.parallelogram:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.parallelogram-btn {
width: 60px;
position: relative;
background: #ffa008;
color: #FFF;
border: none;
display: inline-block;
height: 90px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
padding: 0px;
margin-left: 51px;
font-weight: 700;
cursor: pointer;
}
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
You can also achieve this simply with the following code. In this case only one div is needed.
From this point you can of course fine tune everything but this is just to give you a rough idea.
HTML
<div class="box"></div>
CSS
.box{
width: 400px;
height: 100px;
background: #008dd0;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.box:after{
content: '';
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
background: #ffa008;
}
.box:before{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) skew(-10deg);
width: 40%;
height: 100%;
background: #008dd0;
border: 2px solid white;
border-width: 0 8px;
z-index: 100;
}
.box {
width: 400px;
height: 100px;
background: #008dd0;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.box:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
background: #ffa008;
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) skew(-10deg);
width: 40%;
height: 100%;
background: #008dd0;
border: 2px solid white;
border-width: 0 8px;
z-index: 100;
}
<div class="box"></div>
Hee!
Currently I'm trying to make the following nav
but ending up getting the following
How can I lower the height of the arrow I'm adding at the bottom but keeping the full width?
nav {
position: relative;
display: inline-block;
height: 50px;
width: 100%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
nav:after {
content: "";
position: absolute;
top: 50px;
left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
<nav>nav</nav>
http://jsfiddle.net/v50wwuw6/
Using the border triangle technique with vw unit: http://jsfiddle.net/hamop5ca/
30px is the arrow height.
nav {
position: relative;
height: 50px;
width:100%;
background: gray;
}
nav:before {
content: "";
position: absolute;
top: 100%;
left: 0;
border-top: 30px solid red;
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
}
<nav>nav</nav>
How can I achieve this?
It's a wordpress menu.
pic
Ok, so far I have this:
ul{
display: flex;
li{
width: 100%;
a{
position: absolute;
bottom: 0;
top: 0;
width: 2%;
span{
display: block;
position:absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
};
};
};
};
and it works, but now I need some kind of a javascript, so that the headings inside the span will be centered and every element will have the same amount of space from left and right.
pic2
got it done, with adding left: %; to each menu item element.
Thanks for help!
Made it like this:
fiddle: https://jsfiddle.net/uq3vLvpb/
The html:
<ul>
<li><a><span>one</span></a></li>
<li><a><span>two</span></a></li>
<li><a><span>three</span></a></li>
<li><a><span>four</span></a></li>
<li><a><span>five</span></a></li>
<li><a><span>six</span></a></li>
<li><a><span>seven</span></a></li>
<li><a><span>eight</span></a></li>
</ul>
The css:
ul {
li {
width: 100%;
a {
position: absolute;
bottom: 0;
top: 0;
width: 10.5%;
font-family: 'Lora', serif;
font-size: 26px;
font-weight: 400;
text-align: center;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
text-decoration: none;
padding: 0 15px;
cursor: pointer;
span {
display: block;
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -35%);
-webkit-transform: translate(-50%, -35%);
-moz-transform: translate(-50%, -35%);
}
&:hover {
background-color: rgba(0, 0, 0, 0.4);
}
}
}
li:first-child {
a {
left: 9.5%;
}
}
li:nth-child(2) {
a {
left: 19.5%;
}
}
li:nth-child(3) {
a {
left: 29.6%;
}
}
li:nth-child(4) {
a {
left: 39.6%;
}
}
li:nth-child(5) {
a {
left: 49.7%;
}
}
li:nth-child(6) {
a {
left: 59.8%;
}
}
li:nth-child(7) {
a {
left: 69.9%;
}
}
li:nth-child(8) {
a {
left: 80%;
}
}
}
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>