This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to create a triangle in CSS3 using border-radius
Are they possible to make with CSS?
Normal arrow:
.some_element:after{
content: '';
height: 0;
width: 0;
position: absolute;
top: 0;
left: 0;
border: 100px solid transparent;
border-top-color: #000;
}
( http://jsfiddle.net/W3xwE/ )
Rounded arrow (I want only the bottom side rounded):
:(
Yes, it is possible! You rotate the box, give it a border-radius and use a 45deg linear-gradient as a background.
DEMO
HTML:
<div class='arrow'></div>
CSS:
.arrow {
width: 7em;
height: 7em;
border-radius: 0 0 2em 0;
margin: 5em;
transform: rotate(45deg);
background: linear-gradient(-45deg, black 50%, transparent 50%);
}
If you want the angle of the arrow to be different, then you can also skew it.
Take into account the fact that CSS gradients are not supported by IE9 (I am not saying "or older" this time because you mention CSS3 among your tags). The solution in that case would be to use a solid background and to somehow make sure the upper part won't show, either by covering it with a preceding element, or by clipping it (see the answer Tim Medora provided).
Also, at this point there is still no support for the unprefixed syntax (although this will soon change :D ), so you will need to either manually add the prefixes -webkit-, -moz-, and -o-. (I did not add them in the demo because Dabblet uses -prefix-free which takes care of doing this.)
Here's a way to do it by placing a rotated square inside a box to control clipping. Personally, I think #Ana's solution is much cleaner.
http://jsfiddle.net/K44mE/14/
<div id="outer"><div id="inner"> </div></div>
#inner{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
background-color:silver;
width:100px;
height:100px;
top: -70px;
left: 20px;
position:relative;
-moz-border-radius: 20px;
border-radius: 20px;
}
#outer {
position: absolute;
width: 140px;
height: 70px;
top:10px;
left:10px;
overflow: hidden;
border: 1px solid red;
}
CSS
.arrow {
width: 7em;
height: 7em;
border-radius: 0 0 2em 0;
margin: -2em 2.5em;
transform: rotate(45deg);
background: linear-gradient(-45deg, black 50%, transparent 50%);
}
HTML
<div class='arrow'></div>
Related
I have a centered form on my page positioned using top and left values and css3 transformations.
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>
.middle {
position: absolute;
top: 50%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/** backface-visibility: hidden; **/
}
h1 {
padding-bottom: 5px;
border-bottom: 3px solid blue
}
Notice backface-visibility. When set to hidden, all problems are solved for me using chrome 42. It doesn't render blurry. For others however using the same chrome version, it renders blurry with it.
Here's what it looks like without BV: http://jsfiddle.net/mzws2fnp/
To you it may be blurry, to others it may not.
Here's what it looks like with BV: http://jsfiddle.net/mzws2fnp/2/
For some reason people see the border blurry however I do not. I know backface-visibility: hidden is meant to fix that, and it does for me, just not for others using the same browser as I. Strange.
Try -50.1%
transform: translateY(-50%) translateX(-50.1%);
EDIT:
I have found out, they are blurred when chrome dev tools are opened, try to close them and refresh
This is a bug in Google Chrome. I reported this issue to Google:
Rendering bug in css transform: it blurrs borders
<div class="middle">
<input type="text" />
</div>
.middle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
input {
border: 1px solid black;
border-radius: 4px;
}
var middle = document.querySelector('.middle');
setInterval(function(){
middle.style.paddingTop = middle.style.paddingTop === "0px" ? "1px" : "0px";
}, 1000);
Animated bug demonstration
When you use percentage, will play an odd number. will blurry borders,
using parseInt to assign the value is integer.
$(document).ready(function(){
$('.middle').css({
'top':parseInt($('.middle').position().top)+ 'px',
'left': parseInt($('.middle').position().left)+'px',
'transform':'none',
'-webkit-transform':'none'
});
});
.middle {
position: absolute;
top: 30%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}
.middle2 {
position: absolute;
top: 70%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>
<div class="middle2">
<h1>This is blurry, or should be.</h1>
</div>
In this specific case where you're using a solid border, you can try using a box-shadow instead of a border as a workaround. For example, replace: border-bottom: 3px solid blue; with box-shadow: 0px 3px 0px blue;
Use even number (2px or 4px) for the border. Odd number (3px or 5px) is giving that blur.
border-bottom: 4px solid blue;
there is little hack that can help to get any block as center middle.
in parent <div> where we add position: relative add below properties,
display: flex;
justify-content: center;
now add align-self: center; property with the block which we want to make center middle make sure that this block is absolute position.
Because translated element height is odd number. This will not occur when element height is even number.
This problem occurs when we add
transform: translateY(-50%) translateX(-50%);
OR
transform: translate(-50%, -50%);
it is still as an open issue in chromium bugs list.
I have been asked to create a responsive application, the layout / theme of the application has a angled shapes (see image below). I've tried using CSS3 skew and rotate however these property values manipulated the content as well as the shape which is not what i want. I would just like the shape to have what appears to be a 90 degree angle and the text to lay on top of the shape.
Can this be accomplished using CSS3?
Rather than using skew and rotate on the container itself, you can use an ::after rule to create an empty div to rotate.
jsfiddle here: http://jsfiddle.net/carasin/ndb1koca/1/
html:
<div id="banner-wrap">
<div id="banner"><h1>Text here</h1></div>
</div>
css:
#banner-wrap {
position:relative;
}
#banner::after {
content: "";
display:block;
background: orange;
width:200%;
height:500px;
position:absolute;
left:-30%;
top:-60%;
z-index:0;
transform: rotate(13deg);
}
h1 {
font-family:sans-serif;
color:#fff;
text-transform:uppercase;
font-size:3em;
z-index:1;
position:relative;
padding:40px 30px ;
}
I've tried using CSS3 skew and rotate however these property values
manipulated the content as well as the shape which is not what i want.
In order to prevent the content from being affected you could simply skew() the content In the opposite direction as well - Example.
Used properties
transform
transform-origin
overflow
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
}
h1, h2 {
text-transform: uppercase;
font-size: 6vw;
}
h2 {
font-size: 4vw;
}
.wrapper {
overflow: hidden;
}
header {
background-color: gold;
height: 40vw;
line-height: 40vw;
-webkit-transform: skewY(10deg);
-ms-transform: skewY(10deg);
-o-transform: skewY(10deg);
transform: skewY(10deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-box-shadow: inset 0 -.7em 1em -0.7em rgba(0,0,0,0.5);
box-shadow: inset 0 -.7em 1em -0.7em rgba(0,0,0,0.5);
}
header h1 {
-webkit-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
padding-left: 1em;
color: white;
}
.search {
background-color: lightgray;
padding: 1em;
margin: 0 1em;
}
<div class="wrapper">
<header>
<h1>Hello World</h1>
</header>
</div>
<div class="search">
<h2>Search</h2>
</div>
There's an upcoming CSS property that allows you to create this effect without hacks. It's called clip-path, though presently (Oct 2014) you need to use -webkit-clip-path to avoid collisions with an existing SVG CSS property. The two properties will be merged soon into a single clip-path.
This works today in Chrome, Safari, iOS 8 and Opera (Firefox will follow soon, without -webkit- prefix, obviously):
#banner {
background: yellow;
width: 600px;
height: 300px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 50%);
}
Since the polygon uses percentages, the clipping shape will scale with the container whatever dimensions it has -- good for responsive design.
Your use case means that this solution can degrade gracefully to a simple rectangle.
Learn mode about clipping as part of CSS Masking.
This question already has answers here:
How to bevel the corner of a block div?
(4 answers)
Closed 8 years ago.
I am trying to create a Parallelogram with a straight right side in css but so far I am struggling to achieve this.
I am using css ...
-webkit-transform: skew(-18deg);
-moz-transform: skew(-18deg);
-o-transform: skew(-18deg);
...to 'skew' the rectangle to create the Parallelogram.
I am wondering if the right side can be made straight?
Would it require :before and :after in the css?
Any help of this would be great.
Thanks,
Phil
You can achieve this by adding a triangle shaped element and positioning it next to the rectangular element.
Option 1: (Using the border hack)
In the example below, I have added a blue color for the triangular shape only to illustrate how the shape is achieved. Please replace the color in the below line to achieve the parallelogram with a slanted edge on one side and a straight edge on the other.
Change the below
border-color: transparent blue blue transparent;
to
border-color: transparent red red transparent;
Note: When using this method, it is difficult to add an extra outer border to the shape.
Snippet:
.trapezoid{
position: relative;
height: 100px;
width: 100px;
background: red;
margin-left: 50px;
color: white;
}
.trapezoid:after{
position: absolute;
content: '';
left: -50px;
top: 0px;
border-style: solid;
border-color: blue transparent blue transparent;
border-width: 100px 0px 0px 50px;
}
<div class="trapezoid">Some dummy text</div>
Option 2: (Using skew)
.trapezoid{
position: relative;
height: 100px;
width: 100px;
background: beige;
border: 1px solid red;
border-left-width: 0px;
margin-left: 50px;
}
.trapezoid:before{
position: absolute;
content: '';
left: -25px;
top: -1px;
height: 100px;
width: 50px;
background: beige;
border: 1px solid red;
z-index: -1;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
transform: skew(20deg);
}
<div class="trapezoid">Some dummy text.</div>
Add this id to any div youll see the expected result
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
height: 0;
width: 100px;
}
JSFIDDLe
Need to draw angular sides of menubar as
inner content may be the some labels or links.
How about using CSS3 transform skew?
Demo
.shape {
width: 200px;
height: 50px;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
transform: skew(30deg);
background: #000;
margin: 20px;
}
Nothing much to explain here, it's a simple div element, which I've skewed by 30deg which will result in the shape you expected.
Note: It's a CSS3 property, so older browsers, as well as IE will spoil your things, make sure you use CSS3 Pie.
Other way to achieve this is by using :after and :before pseudo and CSS Triangles along with content property.
Demo 2 (Kept red triangles for demo purpose)
Demo 3 (Color Changed)
Demo 4 (As you commented, you need to use top: 0; for :before and :after pseudo as well, because when you add text, it will shift both the triangles from the top. So inorder to prevent that, use top: 0;)
Here, am using a simple div element and placing 2 CSS triangles which are positioned absolute to the container. This is more compatible than above, if you are going for a NON CSS3 solution, you can choose this. Make sure you use display: block; for :before as well as :after. And ofcourse you can merge the common styles but I've kept both separate, so that you can get easability to customize them separately.
.shape {
width: 200px;
height: 50px;
background: #000;
margin: 50px;
position: relative;
}
.shape:before {
display: block;
content: "";
height: 0;
width: 0;
border: 25px solid #f00;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
position: absolute;
left: -50px;
}
.shape:after {
display: block;
content: "";
height: 0;
width: 0;
border: 25px solid #f00;
border-top: 25px solid transparent;
border-right: 25px solid transparent;
position: absolute;
right: -50px;
}
HTML
<div class="shape">
<div class="text">
text goes here
</div>
</div>
CSS
.shape {
width: 200px;
height: 30px;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
transform: skew(30deg);
background: #000;
margin: 20px;
color:#fff;
}
.text{
width: 150px;
height: 30px;
margin:0px auto;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
transform: skew(-30deg);
color:#fff;
}
One major gripe I have with using triangular borders is that there is no easy way to have multiple triangles with different colours, even using javascript [because JS can't access the pseudo-elements :before and :after], the alternative being that I use 3 divs, align them properly, and give all of them the same colour, etc... Too much hassle.
The best way would be using transform: skew() for newer browsers.
But you need to keep in mind that this will transform every element inside that div as well. So the text inside your menu-bar would also come up skewed. To counter that, add a reverse-skew on the inner div like this:
.menu-container {
...
transform: skewX(30deg);
...
}
.menu-inner {
...
transform: skewX(-30deg);
...
}
Have fun experimenting... :)
Can some CSS expert help guide me to achieve slant line in a box via css. I can't attached the image. I know this can be done but lack of expert knowledge over css I am missing the way to achieve this. I am referring to this example. If you go end of the page (slanthowto.html) there is a image which show only slanted black line... I want to implement the same.
Regards,
That's the CSS and HTML code for the slanted black line:
.borderdraw {
border-style:solid;
height:0;
line-height:0;
width:0;
}
<div style="position: relative; width: 100px; height: 100px;">
<div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px;" class="borderdraw"><!-- --></div>
<div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px;" class="borderdraw"><!-- --></div>
</div>
EDIT: You can also copy the properties from the class to the style attribute:
<div style="position: relative; width: 100px; height: 100px;">
<div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 0px 0px 65px 87px; border-style: solid; height: 0; line-height: 0; width: 0;"><!-- --></div>
<div style="position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(255, 240, 240); border-width: 0px 0px 64px 85px; border-style: solid; height: 0; line-height: 0; width: 0;"><!-- --></div>
</div>
Update for 5 years later (2015)...
2D transforms enjoy much better support now. They'll also do the work of eliminating that "crunch" or jagged edges you may have seen with the previous method. CSS below.
.slanted-line {
width: 300px;
background: black;
height: 2px;
/* bonus rounded edges */
border-radius: 1px;
transform: rotate(-45deg);
-os-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
/* helps with positioning */
transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
}
<div class="slanted-line"></div>
Browser support according to caniuse.com:
IE 9+
Firefox 31+
Chrome 31+
Safari 7+
Opera 27+
iOS Safari 7.1+
Android Browser 4.1+
Mobile Chrome 41+
DEMO EXAMPLE
Don't use this method. No seriously, don't. Look at the date at the bottom of the page. It says
Last modified: Thu Jan 30 21:56:16 Romance Standard Time 2003
That's seven years ago. Technology's moved on. We don't do this anymore. Just go use any graphics manipulation software, draw yourself a triangle, and use either of these two techniques to stick a image into your webpage.
First of all, the image. Here's one I created in Paint earlier:
Then, with either the img tag
<img src="triangle.png" alt="Triangle!" />
or the background, with CSS method
<div class="triangle"></div>
.triangle {
background: url('triangle.png') no-repeat;
width: 120px;
height: 120px;
}
That's better, isn't it.