Here is a simple ribbon I want to position at the left upper corner of the screen:
.ribbon {
width: 200px;
background: #e43;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #ffffff;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
font-family: "Open Sans Regular";
font-size: 1.5em;
top: -10px;
left: -80px;
height: 80px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position: fixed;
box-shadow: 0 3px 3px rgba(0,0,0,.3);
}
.ribbon.new {
background: #9ddc03;
}
<div class="ribbon new">NEW</div>
As you see the New word on the green ribbon is not totally visible because it is on the upper edge of the rectangle.
How can I position the ribbon's text on the lower edge of the rectangle so that we can see it correctly.
I used the below flex postioning on the ribbon class but it pushes the text to the right and not the center:
display: flex;
justify-content: flex-end;
align-items: flex-end;
You can update your code like below:
.ribbon {
background: #e43;
color: #ffffff;
font-size: 1.5em;
position: fixed;
top: 0;
left: 0;
transform: translateX(-50%) rotate(-45deg);
transform-origin:top;
padding:40px 100px 0; /* adjust the 40px to control the height (the 100px need to be a big value) */
box-shadow: 0 3px 3px rgba(0,0,0,.3);
}
.ribbon.new {
background: #9ddc03;
}
<div class="ribbon new">NEW</div>
Related
A note: The original post were deleted with its user, and as I found it could be useful, I reposted it.
The rectangle should be rotated -90deg and be centered vertical in the left side of the screen. As you can see in the picture below.
If possible, only HTML and CSS should be used.
The problem is, to first rotate the element, which makes it more difficult to center it.
Stack snippet
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
}
* {
box-sizing: border-box;
}
body>div {
position: fixed;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
-webkit-transform: rotate(-90.0deg);
-moz-transform: rotate(-90.0deg);
-ms-transform: rotate(-90.0deg);
-o-transform: rotate(-90.0deg);
transform: rotate(-90.0deg);
}
<div>Lorem Ipsum</div>
To better control the rotation, and more easily both left align and center it vertically, use both the transform-origin and transform.
First make its left/top corner as the center of the rotation by adding transform-origin: left top; to the div.
Second, by combine rotate and translate, move it half of its own width to the left (translateX(-50%)), and then rotate it 90 degrees counterclockwise rotate(-90.0deg).
Note 1; When using more than one <transform-function> value, they execute from right to left, which in below sample mean it starts with translateX.
Note 2; I temporary removed the prefixed properties, so you need to add them back.
Stack snippet
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
body>div {
position: fixed;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
transform-origin: left top;
transform: rotate(-90.0deg) translateX(-50%);
}
<div>Lorem Ipsum</div>
Update after a comment.
Here is 4 fiddles, showing 4 steps, that hopefully make it more clear how this works:
Step 1 - Step 2 - Step 3 - Step 4
Here is an animation, showing how it moves, and hopefully make it more clear how this works:
html, body {
margin: 0;
font-size: 16px;
font-family: Arial, sans-serif;
}
.faked-body div {
position: absolute;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
transform-origin: left top; /* the rotation center is moved to black circle */
transform: rotate(0)
translateX(0);
animation: the-div 3s 1s forwards;
}
#keyframes the-div {
0% { transform: rotate(0)
translateX(0);
}
50% { transform: rotate(0)
translateX(-50%); /* move to left */
}
100% { transform: rotate(-90deg) /* rotate 90 degree */
translateX(-50%);
}
}
/* styling/info for this demo */
.faked-body div::before {
content: '';
position: absolute;
top: -10px;
left: 0;
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
animation: the-spot 1.5s 1s forwards;
}
.faked-body {
position: relative;
margin: 10px 60px;
width: 440px;
height: 200px;
background-color: #ccc;
font-size: 14px;
}
.faked-body::before {
content: 'The gray area represents the body so we can see how the "Lorem Ipsum" element moves';
color: #666;
}
.faked-body::after {
content: 'The black spot show where the rotation center is';
color: #222;
position: absolute;
bottom: 0; left: 0;
}
#keyframes the-spot {
0% { left: 0;
}
100% { left: 50%;
}
}
<div class="faked-body">
<div>Lorem Ipsum</div>
</div>
We can use the 'text-orientation' property instead of 'rotate'.
I tried the below code and it worked for me.
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
align-content: center;
}
body > div {
background-color: #ff0000;
color: white;
font-weight: bold;
padding: 10px;
width: auto;
height: auto;
writing-mode: vertical-rl;
text-orientation: upright;
}
Create another parent div to 'Lorem Ipsum' and apply "display: flex;
align-items: center;
align-content: center;" properties to the parent div to avoid giving flex to 'body' tag.
Hope it helps.
Understood. Please try the below css, it may solve your issue.
body, html {
height: 100%;
display: grid;
font-size: 16px;
font-family: Arial, sans-serif;
}
div {
margin: auto auto auto 10;
background-color: #FF0000;
-webkit-transform: rotate(-90.0deg);
-moz-transform: rotate(-90.0deg);
-ms-transform: rotate(-90.0deg);
-o-transform: rotate(-90.0deg);
transform: rotate(-90.0deg);
padding: 10px;
}
FYI: I tested this on chrome and safari and working.
Im trying to create this <a> element that pins left of the screen. Its position is absolute but I cannot get it as in image:
HTML:
<a class="feedback__btn">Feedback</a>
CSS:
.feedback__btn {
position: absolute;
top: 11.5%;
left: 0;
background: green;
width: 150px;
height: 45px;
color: red;
z-index: 9;
display: inline-block;
transform: rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
Two things that cause the tag from not pinning to the left: transform and the width/height. How to to get it pinned to either sides of screen (left in this case) with the same transformation?
If you move the center-point of the button, with transform:translateX(-50%) you will have a much easier way to figure out how much you need to move the button to place it correctly:
.feedback__btn {
position: fixed;
top: 11.5%;
left: 23px;
background: green;
width: 150px;
height: 46px;
color: red;
z-index: 9;
display: inline-block;
transform: translateX(-50%) rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
I have added transform: translateX(-50%) rotate(270deg); and left: 23px; to your code and changed the heigh of the button to an even number, as that is easier to halve (half of 46 is 23, while half of 45 is 22.5, and you can't have half pixels).
I have also changed the position to fixed, so it follows the user down the site when scrolling.
I have the following Jade / HTML:
a.service.comparison(ng-href="...")
.icon
i.far.fa-map-signs
.content
span.d-block.title Compare energy deals
span.text Looking for a better energy deal?
.arrow
button.btn(type="button")
i.fas.fa-chevron-circle-right
And Less / CSS:
.service {
color: #grey-dark;
display: flex;
margin: 0 auto 15px;
max-width: 100%;
.icon {
border: 1px solid #ccc;
border-right: none;
border-radius: 2px 0 0 2px;
font-size: 28px;
padding: 10px 15px;
i {
position: relative;
top: 50%;
text-align: center;
.transform(translateY(-70%));
width: 40px;
}
}
.content {
border: 1px solid #ccc;
border-right: none;
flex-grow: 1;
padding: 15px;
.title {
color: #green-medium;
font-size: 17px;
}
}
.arrow {
min-height: 100%;
.btn {
background: #green-medium;
border-radius: 0 3px 3px 0;
color: white;
padding: 0;
width: 35px;
height: 100%;
i {
position: relative;
top: 50%;
.transform(translateY(20%));
vertical-align: top;
}
}
}
}
It looks nice on all Browsers, the left icon is in centre and the right green button has a 100% height and fill the box... Unfortunately on iOS Safari it looks differently: the left icon is on top and the right button doesn't fill the entire box height as you can see in the image below.
Does anyone know how can I fix this? Thanks!
EDIT:
Transform Mixin:
.transform(#string){
-webkit-transform: #string;
-moz-transform: #string;
-ms-transform: #string;
-o-transform: #string;
transform: #string;
}
Ok, so everyone knows you can make a triangle using this:
#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
And that produces a solid, filled in triangle. But how would you make a hollow-type arrow-like triangle, like this?
You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after, and rotate and position each of them to form one of the bars. An easier solution is adding two borders to just the before element and rotate it using transform: rotate.
Scroll down for a different solution that uses an actual element instead of the pseuso elements
In this case, I've added the arrows as bullets in a list and used em sizes to make them size properly with the font of the list.
ul {
list-style: none;
}
ul.big {
list-style: none;
font-size: 300%
}
li::before {
position: relative;
/* top: 3pt; Uncomment this to lower the icons as requested in comments*/
content: "";
display: inline-block;
/* By using an em scale, the arrows will size with the font */
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
margin-right: 0.5em;
}
/* Change color */
li:hover {
color: red; /* For the text */
}
li:hover::before {
border-color: red; /* For the arrow (which is a border) */
}
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<ul class="big">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
Of course you don't need to use before or after, you can apply the same trick to a normal element as well. For the list above it is convenient, because you don't need additional markup. But sometimes you may want (or need) the markup anyway. You can use a div or span for that, and I've even seen people even recycle the i element for 'icons'. So that markup could look like below. Whether using <i> for this is right is debatable, but you can use span for this as well to be on the safe side.
/* Default icon formatting */
i {
display: inline-block;
font-style: normal;
position: relative;
}
/* Additional formatting for arrow icon */
i.arrow {
/* top: 2pt; Uncomment this to lower the icons as requested in comments*/
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}
And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.
If you seek more inspiration, make sure to check out this awesome library of pure CSS icons by Nicolas Gallagher. :)
This can be solved much easier than the other suggestions.
Simply draw a square and apply a border property to just 2 joining sides.
Then rotate the square according to the direction you want the arrow to point, for exaple: transform: rotate(<your degree here>)
.triangle {
border-right: 10px solid;
border-bottom: 10px solid;
height: 30px;
width: 30px;
transform: rotate(-45deg);
}
<div class="triangle"></div>
Responsive Chevrons / arrows
they resize automatically with your text and are colored the same color. Plug and play :)
jsBin demo playground
body{
font-size: 25px; /* Change font and see the magic! */
color: #f07; /* Change color and see the magic! */
}
/* RESPONSIVE ARROWS */
[class^=arr-]{
border: solid currentColor;
border-width: 0 .2em .2em 0;
display: inline-block;
padding: .20em;
}
.arr-right {transform:rotate(-45deg);}
.arr-left {transform:rotate(135deg);}
.arr-up {transform:rotate(-135deg);}
.arr-down {transform:rotate(45deg);}
This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down
Here's a different approach:
1) Use the multiplication character: × ×
2) Hide half of it with overflow:hidden
3) Then add a triangle as a pseudo element for the tip.
The advantage here is that no transforms are necessary. (It will work in IE8+)
FIDDLE
.arrow {
position: relative;
}
.arrow:before {
content: '×';
display: inline-block;
position: absolute;
font-size: 240px;
font-weight: bold;
font-family: verdana;
width: 103px;
height: 151px;
overflow: hidden;
line-height: 117px;
}
.arrow:after {
content: '';
display: inline-block;
position: absolute;
left: 101px;
top: 51px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 24px;
border-color: transparent transparent transparent black;
}
<div class="arrow"></div>
Just use before and after Pseudo-elements - CSS
*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: white; transition: background .3s ease-in-out}
:root:hover{background: red }
div{
margin: 20px auto;
width: 150px;
height: 150px;
position:relative
}
div:before, div:after{
content: '';
position: absolute;
width: 75px;
height: 20px;
background: black;
left: 40px
}
div:before{
top: 45px;
transform: rotateZ(45deg)
}
div:after{
bottom: 45px;
transform: rotateZ(-45deg)
}
<div/>
An other approach using borders and no CSS3 properties :
div, div:after{
border-width: 80px 0 80px 80px;
border-color: transparent transparent transparent #000;
border-style:solid;
position:relative;
}
div:after{
content:'';
position:absolute;
left:-115px; top:-80px;
border-left-color:#fff;
}
<div></div>
> itself is very wonderful arrow! Just prepend a div with it and style it.
div{
font-size:50px;
}
div::before{
content:">";
font: 50px 'Consolas';
font-weight:900;
}
<div class="arrowed">Hatz!</div>
Left Right Arrow with hover effect using Roko C. Buljan box-shadow trick
.arr {
display: inline-block;
padding: 1.2em;
box-shadow: 8px 8px 0 2px #777 inset;
}
.arr.left {
transform: rotate(-45deg);
}
.arr.right {
transform: rotate(135deg);
}
.arr:hover {
box-shadow: 8px 8px 0 2px #000 inset
}
<div class="arr left"></div>
<div class="arr right"></div>
I needed to change an input to an arrow in my project. Below is final work.
#in_submit {
background-color: white;
border-left: #B4C8E9;
border-top: #B4C8E9;
border-right: 3px solid black;
border-bottom: 3px solid black;
width: 15px;
height: 15px;
transform: rotate(-45deg);
margin-top: 4px;
margin-left: 4px;
position: absolute;
cursor: pointer;
}
<input id="in_submit" type="button" class="convert_btn">
Here Fiddle
.arrow {
display : inline-block;
font-size: 10px; /* adjust size */
line-height: 1em; /* adjust vertical positioning */
border: 3px solid #000000;
border-left: transparent;
border-bottom: transparent;
width: 1em; /* use font-size to change overall size */
height: 1em; /* use font-size to change overall size */
}
.arrow:before {
content: "\00a0"; /* needed to hook line-height to "something" */
}
.arrow.left {
margin-left: 0.5em;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
.arrow.right {
margin-right: 0.5em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow.top {
line-height: 0.5em; /* use this to adjust vertical positioning */
margin-left: 0.5em;
margin-right: 0.5em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arrow.bottom {
line-height: 2em;
/* use this to adjust vertical positioning */
margin-left: 0.5em;
margin-right: 0.5em;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
<div>
here are some arrows
<div class='arrow left'></div> space
<div class='arrow right'></div> space
<div class='arrow top'></div> space
<div class='arrow bottom'></div> space with proper spacing?
</div>
Similar to Roko C, but a little more control over size and placement.
I need to create a fixed menu button which would be assigned to the right side of the browser. Currently i my code looks lie this:
#button-side-menu {
background: none repeat scroll 0 0 #F5F5F5;
border-radius: 5px 5px 0 0;
color: #363636;
height: 28px;
position: fixed;
right: 16px;
top: 91px;
z-index: 2000;
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-webkit-transform: rotate(-90deg);
-moz-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
padding: 10px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
Is it possible to center it in the div, the text was not adhered to the right side. And also is it possible to set test like this:
M
e
n
u
P.S.
Site is multilingual so i need the text, not image in this case.
This works:
#button-side-menu {
background: none repeat scroll 0 0 #F5F5F5;
border-radius: 5px 5px 0 0;
color: #363636;
width: 15px;
position: fixed;
right: 16px;
top: 91px;
z-index: 2000;
word-wrap:break-word;
text-align: center;
padding: 10px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
Important: word-wrap and text-align are added to make it look like what you asked.
Its width is fixed to 15px instead of height.