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/
Related
The backstory is that I want to create a Google Chrome extension, and when it is active it creates a button on top of a website the user is currently on. I have looked at iframe, but Google Chrome does not allow iframe to load an html file. Any new ideas or alternate ways shared would be greatly appreciated!
Add in index.html file google chrome extension.
After adding, It will automatically activate and appear on the webpage.
HTML
<div class="ext-toggle-btn">
<span>Extension name</span>
</div>
CSS
.ext-toggle-btn {
background-color: rgb(242, 245, 247);
box-shadow: rgba(118, 118, 118, 0.11) 2px 0px 5px 0px;
opacity: 1;
height: 94px;
line-height: 1;
position: absolute;
left:-5px;
text-align: center;
top: 50%;
margin-top: -50px;
width: 30px;
z-index: 1000000001;
cursor: pointer;
border-radius: 0px 4px 4px 0px;
border-width: 1px 1px 1px;
border-style: solid solid solid none;
border-color: rgb(224, 228, 231) rgb(224, 228, 231) rgb(224, 228, 231);
border-image: initial;
border-left: none;
padding: 6px;
transition: right 0.25s ease-in 0.2s, opacity 0.35s ease-in 0.2s;
}
.ext-toggle-btn > span {
display: inline-block;
font-size: 12px;
left: -1px;
line-height: 14px;
position: relative;
top: 10px;
transform: rotate(-180deg);
writing-mode: tb-rl;
}
Github example link: https://github.com/vaibhavbhuva/simple-youtube-google-extension.git
With appropriate extension permissions, you should be able to insert HTML and CSS into the active tab. You can insert a div in the beginning of the document and position it in CSS with position:fixed|absolute, and that should have the div overlaying the webpage content.
You essentially want to insert your modal HTML and CSS into the active tab.
Please let me know if I understood your question. I would have left this as a comment but I don't have those account permissions yet lol.
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.
Hello is it possible to make a image have a slanted right side border.
.fh {
border-right: 180px solid transparent;
}
<div class="fh"><img src="img/fh.jpg" style="max-height: 500px;"></div>
So what I basically want is this http://prntscr.com/glcq2l but with the image instead.
One possible solution is to have a div which you rotate and set overflow hidden. There is a wrap around it, just in case you want to use it it makes it easier to place the image.. fiddle to play around here (I left the borders just to help understand whats going on)
(The background image on the body is just there to show that the cut off corner is transparent and not a border or anything like that.)
body {
background-image: url(https://i.stack.imgur.com/xxGZk.jpg);
}
* { box-sizing: border-box; }
.wrap {
position: relative;
width: 400px;
height: 200px;
border: solid 2px black;
overflow:hidden;
}
.fh {
position: relative;
top: -5px;
left: -250px;
width: 600px;
height: 700px;
transform: rotate(45deg);
overflow: hidden;
border-top:solid 1px red;
border-bottom:solid 1px red;
border-left:solid 1px orange;
border-right:solid 1px lime;
}
.fh img {
position: absolute;
margin: -30px 0px 0 30px;
top: 0px;
left: 0px;
border:solid 2px green;
width: 400px;
height: 200px;
transform: rotate(-45deg);
}
<div class="wrap">
<div class="fh">
<img src="http://lorempixel.com/400/200/sports/1/" >
</div>
</div>
A lot of answers and possible solutions can also be found here: Cut Corners using CSS of course they need to be tweaked to your request.
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.
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.