I am looking to make a triangle button in the top-right of my website (fixed position). It's just a icon over top of a background colour with hover effect. I was wondering if there is a way to get a angled div or if it needs to be a background image?
CSS
#top-btn {
position: fixed;
top: 0;
right: 0;
background-color: red;
}
HTML
...
<div id="top-btn">icon</div>
EDIT - visual representation. positioned top right of window
Updated for triangle on right with rotated text
Use the border trick to create a triangle in CSS: DEMO
HTML:
<div id="corner-triangle">
<div class="corner-triangle-text"><span class="corner-triangle-firstline">Free</span><br>Shipping!</div>
</div>
CSS - note comments for adjusting triangle size and color; also, remove transform: rotate(45) lines if you don't want the text rotated:
div#corner-triangle {
display: block;
width: 100px;
height: 100px;
border-style: solid;
border-width: 0 200px 200px 0; /* adjust for size of triangle */
border-color: transparent #da0039 transparent transparent; /* adjust for color of triangle */
position: fixed;
top: 0;
right: 0;
z-index: 99999;
color: white;
text-shadow: 0 0 25px 9px #fff;
-webkit-filter: drop-shadow(0 1px 9px #000000);
filter: drop-shadow(0 1px 9px #000000);
}
div#corner-triangle .corner-triangle-text {
position: relative;
font-size: 2.1em;
top: 0;
right: -90px;
font-family: sans-serif, "Helvetica Neue", Helvetica, Arial;
font-weight: 200;
line-height: 1.1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
div#corner-triangle .corner-triangle-text span.corner-triangle-firstline {
margin-left: 29px;
}
div#corner-triangle .corner-triangle-text a {
color: white;
}
div#corner-triangle .corner-triangle-text a:hover,
div#corner-triangle .corner-triangle-text a:link,
div#corner-triangle .corner-triangle-text a:visited,
div#corner-triangle .corner-triangle-text a:active,
div#corner-triangle .corner-triangle-text a:focus {
text-decoration: none;
}
Basically, you create an element with width and height of zero, and use borders to create the triangles.
[]
This article shares some code.
https://css-tricks.com/snippets/css/css-triangle/
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.triangle {
border-width: 50px;
border-style: solid;
border-color: red red transparent transparent;
position: fixed;
top:0;
right:0;
width:0;
height:0;
}
Working fiddle.
If you're asking how to make a triangle without using an image, there's these html characters: ▲ ▲ and ▼ ▼
You can also make triangles in css by making an element with a width and height of zero, and giving it a border on only 3 sides, with 2 sides being transparent.
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
More detail here
https://css-tricks.com/snippets/css/css-triangle/
This is what I came up with:
.corner{
width: 0;
height: 0;
border-top: 50px solid rgb(227, 37, 37);
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right:50px solid rgb(227, 37, 37);
float:right;
}
.corner:hover{
border-color: #A00404 #A00404 transparent transparent;
transition: border-color 1s;
}
Here is the JSfiddle demo
Depending on what you need to do with it, the easy way would be to use a character like the following: ▴
You cannot just copy and paste it though. Use the following in your code to display this character:
▴
It may not suit every situation, but I've used it. It's as easy to place as any other text, and you can easily resize it, apply colour, background, or shadow to it, because it's just text.
Here's a list of all the characters you can use, depending of course on the font you're using, which will be a limitation of this method I think:
http://dev.w3.org/html5/html-author/charref
Another limitation would be if you want to place text or an icon on top of it. I'm sure it's possible, but there are better methods if that's your intention.
Related
Trying to customize tooltips I created. I would like the tooltip to appear right below the hover text, to be responsive and most importantly to make the text multiline. By this I mean when I want my tooltip to instead of spreading horizontally to spread vertically.
So adjusting the width of the text, the longer the text the longer the vertical size of the container as opposed to the text flowing horizontally.
This is what I have tried thus far:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
color: black;
}
.tooltip:hover {
text-decoration: none;
}
[data-title]::after {
content: attr(data-title);
background: rgba(0, 0, 0, 0.2);
color: #111;
-website-transform: translateY(50%) translateX(-55%);
transform: translateY(50%) translateX(-55%);
word-wrap: break-word;
height: 350px;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -2.6em;
left: 0%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 20;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
<p>Words words <a class="tooltip" data-title="Title text.">link text</a> words.
More words <a class="tooltip" data-title="More link text.">more link text</a>.</p>
You can try this-
[data-title]:after {
content: attr(data-title);
background: rgba(0,0,0,.9);
color: #fff;
word-wrap: break-word;
height: auto;
width: 100px;
position: absolute;
padding: 1px 5px 2px 5px;
top: 18px;
left: 0;
word-break: break-all;
box-shadow: 1px 1px 3px #222222;
opacity: 20;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
.tooltip {
color: blue;
position: relative;
cursor: pointer;
}
[data-title]:hover::after{
visibility: visible;
}
We would start off by collecting our data. The collection method will vary depending on what sources we are using. After this process we would then proceed to <a class="tooltip" data-title="The train_test_split function in sklearn splits the dataset into training and test data randomly. You can manually set the test_size option to define the proportion of the dataset to be included in both the test and training splits, by default this value is 0.25 meaning the training set will contain 75% of the data while the test set contains 25% of the data.">split the data</a> into two sets; training and test data. We use the training data to train our model and the test data to <a class="tooltip" data-title="We split the data into training and test data because we want our model to generalize to data it has not been exposed to">test its performance</a>.
Note: For the better performance you have to use javascript for tooltip placement, Auto placement adjustment etc.
I`m trying to make hover effect on a box like this image
I've tried using transparent top and left border but all i got was bottom border extra triangle pointing the other direction like in this
.news:hover {
transform: translateY(20px);
transform: translateX(-20px);
border-left: 20px solid transparent;
border-top: 20px solid transparent;
border-bottom: solid #F4698D 20px;
border-right: solid #F4698D 20px;
}
One solution would be to create a pseudo element using ::after. It sits in the bottom left, overlaying the border, and has it's own gradient background that resembles a triangle.
Because the width of the border is used to determine the height, width, and offset of the overlaying element, I've elected to store that number as a CSS variable.
:root {
--border-width: 10px;
}
div {
padding: 50px;
border-bottom: var(--border-width) solid transparent;
border-right: var(--border-width) solid transparent;
position: relative;
}
div:hover {
border-color: red;
}
div:hover::after {
content: '';
position: absolute;
display: block;
height: var(--border-width);
width: calc(2 * var(--border-width));
bottom: calc(-1 * var(--border-width));
left: 0px;
background: linear-gradient(to right top, white 50%, red 50%);
z-index: 2;
}
<div>Hover me!</div>
Borders create that shape that resembles a frame.
Another solution for this effect is to use :after and :before pseudo elements. You could let them prepared with opacity: 0, and then when hovering the element, make it to opacity: 1. Like this:
.news {
postision: relative;
}
.news:before { // the bottom line
bottom: -20px;
Left: 0;
height: 20px;
width: 100%;
}
.news:after { // the right line
right: -20px;
top: 0;
height: 100%;
width: 20px;
}
.news:after { // here are properties for both pseudo elements
content: '';
position: absolute;
visibility: hidden;
opacity: 0;
transition: .32s;
}
.news:hover {
transform: translate(-20px, 20px);
}
.news:hover:before, .news:hover:after {
opacity: 1;
visibility: visible;
}
Hope it helps.
I'm currently working on a project which could potentially have a large number of images on it at once. So the design we have puts a small caption on the bottom of the image, as an overlay, with a small ::After 'arrow' pointing into the following section.
The overlay is about 10% transparent, so some of the image is just visible, but depending on the image, the color of the overlay will vary - causing the arrow to mismatch.
Please see this image as an example:
Is there any way I can programmatically sample either one or an average of pixels near the 'arrow', so that it always gets the right color, and looks seamless?
Edit:
.overlay-with-arrow
{
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(62, 62, 62, 0.9);
color: #FFF;
text-align: center;
font-family: Montserrat, SansSerif, serif;
text-transform: uppercase;
}
.overlay-with-arrow::after
{
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgb(62, 62, 62);
display: block;
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: -20px;
z-index: 1;
}
Hi there,
I need to have this kind sections division.
The problem is making the right arrow, but most important for me is to make it using borders, so I will be able to easily manipulate with it (e.g, change color, width etc.)
Is there any common solution?
It is preferable to solve this using pure css, but if you know any other way to solve it, please suggest.
Something like this?
.menu-item::after {
content: '';
position: absolute;
top: 50%;
right: -11px;
background-color: red;
width: 20px;
height: 22px;
background-color: #cccccc;
z-index: 1;
transform: rotate( 45deg ) translateY( -50% );
transform-origin: top;
border-radius: 5px;
border-top: solid 2px rgb(236, 240, 241);
border-right: solid 2px rgb(236, 240, 241);
}
https://jsfiddle.net/punb5k49/
you can make a rectangle and make it rotate 45deg and have border radius to have that kind of effect. not that perfect, but it's better then nothing
EDIT*
if you don't get what I mean, see this image and compare it with my jsfiddle
You can check the solution here by using border property:-
<html>
<head>
<style>
.bordr{
height: 30px;
width: 30px;
background: transparent;
border-radius: 2px;
border-right: 1px solid red;
border-bottom: 1px solid red;
transform: rotate(-45deg);
}
</style>
</head>
<div class="bordr">
</div>
</html>
https://jsfiddle.net/xakdeyea/
I know with some border tricks, I could create trapezoid shape. I can also set its border-color to rgba(r,g,b,a) to make it transparent.
But is it possible to create trapezoid that has transparent borders and background ?
See below image for an example,
Currently, I use some png images to achieve this effect，but generating images of different sizes is really boring work，so I'm looking for a css soluation。
Personally, I think it's overkill, but it can be done like this:
demo
HTML:
<div class='outer'>
<div class='content'><!--stuff here--></div>
<div class='label l1'></div>
<div class='label l2'></div>
</div>
CSS:
.outer {
position: relative;
width: 500px; /* whole thing breaks if this is not a multiple of 100px */
border: solid .5em rgba(0,0,255,.5);
border-bottom: solid 0px transparent;
margin: 7em auto 0;
background: rgba(0,0,0,.5);
background-clip: padding-box;
}
.outer:before, .outer:after {
position: absolute;
top: 100%;
height: .5em;
background: rgba(0,0,255,.5);
content: ''
}
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; }
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; }
.content {
padding: .5em;
margin: 1.5em;
border-bottom: solid 1.5em transparent;
background: lightblue;
background-clip: padding-box;
}
.label {
overflow: hidden;
position: absolute;
top: 100%;
width: 15%;
height: 3em;
}
.l1 { left: 15%; }
.l2 { left: 30%; }
.label:before {
position: absolute;
top: -.5em;
width: 100%;
height: 2.5em;
border: solid .5em rgba(0,0,255,.5);
background: rgba(0,0,0,.5);
background-clip: padding-box;
content: '';
}
.l1:before { left: 9%; transform: skewX(30deg); }
.l2:before { right: 9%; transform: skewX(-30deg); }
It works in Firefox, Chrome, Opera and Safari (I was afraid to test it in IE9, though both transform and background-clip work) but only if the width for .outer has a value that's a multiple of 100px.
Unless using a width that's a multiple of 100px, it only works in Firefox and Chrome (there is a little glitch in Chrome - could be fixed by using a WebKit-only left to right linear gradient that sharply goes from transparent to that semitransparent blue really close to the start).
It breaks in Opera and Safari (if using a width that is not a multiple of 100px):
You can make the bg color and border colors transparent, but the borders will not follow the shape of the trapezoid:
http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/1/
So your best bet is to stick with the pngs for now.