I want to make a trapezoid with border radius like this picture. Is it possible?
I tried this code but it does not work
background: #BE1E2D;
width: 130px;
height: 75px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
Visit this website to look at how a lot of shapes are done.
For this shape though (as it is on the website), you need this:
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
background: red;
}
Try this. Doesn't use border-radius though.
.trapezoid{
width:100px;
height:100px;
border:1px solid #000;
background:yellow;
transform: skew(-20deg);
-o-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
}
I don't see how you could do this with border-radius (or why you would want to)
You can do it with a simple skew:
#shape {
width: 150px;
height: 50px;
-webkit-transform: skew(-25deg);
-moz-transform: skew(-25deg);
-o-transform: skew(-25deg);
background: darkred;
}
DEMO
Related
I created an octagon clipped style using CSS transform rotate and scale as the code snippet below.
However, when looking in Chrome 52.0.2743.116 (64-bit) on El Capitan, the image looks blurry. On the contrary, the image looks sharp in Firefox.
I have tried all kinds of solutions such as backface-visibility: hidden; transform: translateZ(0); filter: blur(0); image-rendering: -webkit-optimize-contrast;. Yet the image is still blurry.
Is there any webkit specific rules that I can use to fix this?
div.octagon {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-moz-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-ms-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
-o-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
margin-top: 1em;
margin-bottom: 1em;
}
div.octagon > * {
position: relative;
overflow: hidden;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: transparent;
border: 4px solid;
margin: 0;
background-color: black;
}
div.octagon > *:after {
position: absolute;
/* There needs to be a negative value here to cancel
* out the width of the border. It's currently -3px,
* but if the border were 5px, then it'd be -5px.
*/
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
border: inherit;
}
div.octagon > * > img {
display: block;
-webkit-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-moz-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-ms-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-o-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
transform: rotate(-67.5deg) scale(1.1) translateZ(0);
max-width: 100%;
height: auto;
image-rendering: -webkit-optimize-contrast;
}
.col-6 {
display: inline-block;
width: 49%;
}
.col-6 > .octagon {
width: 100%;
}
<div class="col-6">
<div class="octagon">
<p>
<img src="https://placeimg.com/300/300/people" width="500" height="500" />
</p>
</div>
</div>
<div class="col-6">
<img src="https://placeimg.com/300/300/people" width="300" height="300" />
</div>
I just tested this on my comp, and it looks better when I applied image rendering pixelated instead the -webkit-optimize-contrast.
div.octagon > * > img {
image-rendering: pixelated;
}
I have added a background image to a div, but because the div has been rotated, so has the background-image. How can I rotate just the image the opposite way to it appears straight?
live url: http://bit.ly/1iqXQRN
html
<section id="about-hero-img"></section>
css
#about-hero-img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
width: 1030px; margin-left: -50px; margin-top: 20px; height: 200px; background-image: url('../Images/about-header-img.jpg'); padding-top: 30px; }
Move the background-image to a the :before pseudo-element of you header
#about-hero-img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
width: 1030px;
margin-left: -50px;
margin-top: 20px;
height: 200px;
/* background-image: url('../Images/about-header-img.jpg'); */
padding-top: 30px;
position: relative;
}
#about-hero-img:before {
width: 1030px;
height: 230px;
position: absolute;
left: 0;
top: 0;
content: ' ';
background-image: url('../Images/about-header-img.jpg');
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
I have a couple divs, I want to rotate them to look like diamonds, but I don't want their background images to rotate, how can i achieve this? This is my code right now
<div id="diamonds">
<div class="diamond-big diamond-tiesto"><img src="<?php echo $images_url; ?>dj-1-overlay.png" /></div>
</div>
and my CSS:
#diamonds div {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
float:left;
}
.diamond-tiesto {background-image:url('images/dj-1.jpg'); background-size:cover; width:212px; height:212px; margin-left:160px; margin-right:120px;}
.diamond-tiesto img {margin-top:80px; margin-left:-20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Basically I am trying to achieve this http://mqchen.github.io/jquery.diamonds.js/ without the jquery, anyone have any suggestions
Heres a fiddle just incase:
http://jsfiddle.net/7qj8h/1/
You could use the techniques described in this article and apply the transformation to a background image pseudo-element.
Demo/Code here: http://jsfiddle.net/7qj8h/4/
HTML:
<div id="diamonds">
<div class="diamond-big diamond-tiesto">
<img src="http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1-overlay.png" />
</div>
</div>
CSS:
.diamond-big
{
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
/* rotate diamond */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.label {
/* counter rotate label */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* position label */
margin-top:80px;
margin-left:-20px;
}
.diamond-big:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
/* counter rotate bg */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* set bg for different DJs */
.diamond-tiesto:before {
background: url(http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1.jpg) 0 0 repeat;
}
Set the .diamond to rotate 45 degrees
Set the background on a .diamond-inner child div, and rotate it back -45 degrees to counter the parent's transformation.
Set overflow: hidden; on the .diamond div to clip the edges.
Adjust the positioning on the inner diamond and image.
The result: http://jsfiddle.net/7qj8h/3/
The CSS:
#diamonds > div {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
float:left;
overflow: hidden;
}
.diamond-tiesto {
width:212px;
height:212px;
}
.diamond-tiesto .diamond-inner {
background-image: url("http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1.jpg");
background-size: cover;
height: 305px;
left: 2px;
margin: 0 0 0 -49px;
position: absolute;
top: -45px;
transform: rotate(-45deg);
width: 305px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.diamond-tiesto img {
margin-left: 22px;
margin-top: 123px;
}
This is my code and transform is working in chrome browser but in firefox it is not working.
.delete-white a:before {
background: none repeat scroll 0 0 #FFFFFF;
height: 15px;
left: 6px;
margin-top: -7px;
width: 5px;
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
}
.delete-white a:after {
background: none repeat scroll 0 0 #FFFFFF;
height: 5px;
left: 1px;
margin-top: -2px;
width: 15px;
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
}
Two notes
You need to have content to :before/:after pseudo elements
You have forgotten the unprefixed version: transform: rotate(45deg) scale(1);
Add this rule to element: "display: inline-block;"
You need to include the standard, non-prefixed version (i.e. transform: rotate(45deg) scale(1);) as the final definition in your list of transforms. The -moz one is deprecated, as will/should be the other ones in time. See the MDN for reference.
In this page following CSS to draw 12 point burst, how can I put some text inside it (in current form it does not show text inside text, I test z-index without success)?
How can I draw a 12 burst border in it most clean manner?
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
All you need is to nest another element inside the burst container:
<div id="burst-12"><span>I am the text</span></div>
Then you can style it the way you want:
#burst-12 span {
display:block;
position:absolute;
z-index:2;
}
You'll find a very basic example here.