I'm trying to put some triangles made in css next to containers,
one over the container in white (imitating the background)
and one in blue on the right side.
I tried several solutions, but by using absolute positioning of triangles, when I add an element above the absolutely positioned triangles it breaks their positioning. I also tried the triangles with :after and :before, and using clear for the container, but this did not work.
CSS:
#sortables {
padding: 15px;
}
.sortable {
list-style-type: none;
background-color: #d2e0f2;
padding: 5px;
}
.sortable li {
margin: 5px;
padding: 3px;
}
.sortable li:hover {
cursor: move
}
ul{
margin:0;
}
.dimensions_container {
float: left;
display: block;
position: relative;
width: 160px;
margin:10px;
}
.triangle-right{
content: '';
display: block;
position: absolute;
top: 10px;
left: 170px;
width: 0;
height: 0;
border-color: transparent transparent transparent #d2e0f2;
border-style: solid;
border-width: 17px;
}
.triangle-left{
content: '';
display: block;
position: absolute;
top: 1px;
left: 25px;
width: 0;
height: 0;
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 17px;
}
.header {
text-align:center;
padding: 3px;
width: 154px;
background-color: #d2e0f2;
}
HTML:
<div id="sortables">
<div class="dimensions_container">
<div class="header">Available groups</div>
<ul id="sortable1" class="sortable droptrue ui-sortable">
<li id="undefined" class="ui-state-default">undefined</li>
<li id="undefined" class="ui-state-default">undefined</li>
<li id="undefined" class="ui-state-default">undefined</li>
</ul>
</div>
<div class="triangle-right"></div>
<div class="dimensions_container">
<div class="header">Grouped by</div>
<ul id="sortable2" class="sortable droptrue ui-sortable"></ul>
</div>
<div class="triangle-left"></div>
<div class="dimensions_container">
<div class="header">Drill into</div>
<ul id="sortable3" class="sortable droptrue ui-sortable"></ul>
</div>
</div>
Here you go. You'll find the code in this jsFiddle: http://jsfiddle.net/xKzuX/
When using css arrows, it is better to use :before and :after pseudo selector on the parent with a position: relative on it (you had that part).
Then you absolute position the arrow (you had that part too but with wrong values).
To make it easy to reuse, I've reused your left/right classes. You can just add it wherever needed.
Finally, if your arrows render poorly in some browser, add transform:rotate(360deg); which make it do 360deg (so you won't notice the rotation at all) but it softens the edges.
You might need to use
position:relative
on the parent of your triangles (#sortables here).
Related
I'm doing an UI for a web application with bootstrap, font-awesome icons and I would like to replicate this style in a list:
I have tried:
HTML
<ul role="list">
<li class="btn p-0">
agosto '20
<i class="fas fa-chevron-right"></i>
</li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
display: grid;
grid-gap: 0.8rem;
list-style: none;
li {
border-radius: 0.25rem;
background-color: #ffffff;
border-left: 5px solid blue;
text-align: start;
i {
color: #3C3E43;
float: right;
}
}
}
My result so far:
I can't replicate the left border with its border-radius. Looks like cut off at the right and the space between the border and the text is not applied.
What I am missing?
use pseudo element:
.box {
padding: 5px 10px 5px 20px;
position: relative;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 8px;
background: blue;
border-radius: 50px;
}
<div class="box"> some text</div>
As you likely discovered, border-radius on the <li> rounds the entire list item, not just the left border.
A better solution here would be to use a pseudo element to create the rounded left "border" design. Something like:
li::before {
content: '';
display: inline-block;
width: 5px;
height: 100%;
border-radius: 5px;
background-color: blue;
}
You may have to fiddle with the layout for your use case (height: 100% may not work, among other things), but that's the general direction to take.
I want to create diagonal box inside box. How can I do this using css.
I am attaching an image, exactly what i want. If any one have any idea please share with me.
My Fiddle: http://jsfiddle.net/Ae8Wv/660/
My codes are here:
HTML:
<div class="foo bg1"></div>
<div class="foo bg2"></div>
CSS:
.foo {
float: left;
width: 40px;
height: 40px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
.bg1 {
background-color:#13b4ff;
}
.bg2 {
background-color:#ab3fdd;
}
My Fiddle: http://jsfiddle.net/Ae8Wv/660/
Making divs absolute may disturb other elements. You can also move the second div inside first div and apply margin on second div like shown in this fiddle : http://jsfiddle.net/6k9Ltyoa/
<div class="foo bg1">
<div class="foo bg2"></div>
</div>
.foo {
float: left;
width: 40px;
height: 40px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
.bg1 {
background-color:#13b4ff;
}
.bg2 {
background-color:#ab3fdd;
margin-top:50%;
margin-left:50%;
}
http://jsfiddle.net/Ae8Wv/661/
you can position the second div and assign top,left.
.bg2 {
background-color:#ab3fdd;
position: absolute;
top: 10px;
left: 10px;
}
You just need to add some absolute position to the second box. I'd recommend wrapping it all up to make it responsive too with the container having relative positioning. Use the left/top % values to move the box, greater increase will move them further respectively.
http://jsfiddle.net/Ae8Wv/662/
.bg2 {
background-color:#ab3fdd;
position:absolute;
left:2%;
top:2%;
}
I added the wrapper for you here too. Up to you whether or not you want it :)
http://jsfiddle.net/Ae8Wv/665/
Just add some margin to the purple box like this
http://jsfiddle.net/8odoros/Ae8Wv/667/
.bg2 {
background-color:#ab3fdd;
margin-left:-30px;
margin-top:20px;
}
how about translations?
.bg2{transform: translate(-40px, 20px)}
fiddle
Give the .bg2 div a position: absolute;. And don't forget to put a position: relative; on .bg1, or else the absolute positioning won't work.
HTML
<div class="foo bg1">
<div class="foo bg2"></div>
</div>
CSS
.foo {
position: relative;
float: left;
width: 40px;
height: 40px;
margin: 5px 5px 5px 5px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}
.bg1 {
background-color:#13b4ff;
}
.bg2 {
position: absolute;
top: 50%;
left: 50%;
background-color:#ab3fdd;
}
http://jsfiddle.net/skeurentjes/Ae8Wv/671/
I'm not that good with css. My scenario:
i'm trying to use a css triangle on active list item.
<div class="bx-viewport"> <!-- this div has overflow:hidden for need. -->
<ul class="nav nav-tabs nav-tabs-noborder bxslider">
<li> <!-- css triangle when the item is active -->
... <!-- some text -->
</li>
</ul>
</div>
list css:
.nav-tabs-noborder > li.active:after {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #fff;
content: '';
z-index: 999;
position: absolute;
left: 40%;
bottom: -22px;
}
div.bx-viewport css:
width: 100%;
overflow: hidden;
position: relative;
The triangle only works if i remove overflow hidden. But in this scenario i can't. Is there solution/workaround for that ?
PS: I'm using bxSlider.
Below the print for what i need and showing css properties. (Removing overflow hidden)
http://i.imgur.com/iOl8FiX.png
I use these rules to create a triangle. You could try:
.triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 14px 7px 0 7px;
border-color: #ffffff transparent transparent transparent;
}
Try this:
.nav-tabs-noborder > li.active:after {
content: '▼';
z-index: 999;
position: absolute;
left: 40%;
bottom: -22px;
color: white;
font-size: 20px;
}
You can style the downward triangle using font-size, color etc. and position it correctly using margins.
If you can get rid of position: relative; on div.bx-viewport, that should unhide your triangle. The bottom: -22px; will move it below the bottom of the viewport, though, so you'll have to scroll down to see it.
I'm trying to add a triangle before a div using css, but it ends up under it.
http://jsfiddle.net/lasseedsvik/LwE7u/
HTML
<div id="container">
1234
<div id="toolbar">
Want silly triangle before this div to left
</div>
</div>
CSS
#container {
width: 500px;
}
#toolbar:before
{
width: 44px;
content: '';
height: 0px;
border-style: solid;
border-width: 0 0 44px 44px;
border-color: transparent transparent blue transparent;
}
#toolbar {
float: right;
width: 350px;
height: 44px;
background: blue;
color: #fff;
}
Is there something missing like display: inline or something?
Use CSS Positioning to set the triangle correctly, in the example below, I am using position: relative; on the parent element, and than use position: absolute; for the :before pseudo..and than use left property which is dobule of the elements width
Always you should wrap the absolute positioned elements with a relative positioned containers, else your element will fly out in the wild.
Demo
#container {
width: 500px;
}
#toolbar:before {
position: absolute;
left: -88px; /* Double the element size */
width: 44px;
content: '';
height: 0px;
border-style: solid;
border-width: 0 0 44px 44px;
border-color: transparent transparent blue transparent;
}
#toolbar {
float: right;
width: 350px;
height: 44px;
background: blue;
color: #fff;
position: relative;
}
Note: Generally when you are creating triangles using CSS, it's a
common practice to set the elements height and width to 0 so if
you want, just tweak them up.
Try putting your div#toolbar in position:relative and positionning your pseudo-element in an absolute manner. Then adjust position and margins to position it correctly.
http://jsfiddle.net/LwE7u/2/
Can you make round cap underlines (as in the above image) with CSS? How?
Is there a way to do this with border-bottom? border-radius produces this stylish effect instead:
EDIT: I missunderstood what hpique wated, but this should work:
#test {
font-size: 50px;
background: transparent;
border-radius: 10px;
height: 10px;
width: 255px;
box-shadow: 0 55px 0 0 #000;
font-family: sans-serif;
}
<div id="test">Hello world</div>
Basically I'm putting the text on a div, and the box shadow will be of the same size as the set height and width for that div, just play with the height/width and you should get what you want...
JSBin Demo
Screenshot from the Demo:
Yes, it’s possible. Add a block element using :after with no content and give it desired width/height like so:
h1:after {
content:"";
float:left;
background:green;
width:100%;
height:6px;
border-radius: 3px;
}
Fiddle here: https://jsfiddle.net/toqL0agq/1/
I tried doing this same thing with the accepted answer, but found I was still getting the undesired result shown in the question. You can achieve this with a psuedo class:
HTML:
<span class="kicker">Hello World</span>
CSS:
.kicker {
font-size: 1rem;
position: relative;
&:after {
content: '';
display: block;
width: 100%;
height: 6px;
border-radius: 6px;
background: #000;
position: absolute;
bottom: 0;
left: 0;
}
}
One of the tricks i just learned is instead of working with div borders try adding an :after selector to the heading like :
h1:after{
content: " ";
display: block;
width: 1.5em;
height: .2em;
background-color: #f0860c;
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>test</h1>
</body>
</html>
No. If you want to do this purely with HTML+CSS you would need a secondary element to sit beneath the text, and then apply curvature and background colour to that. Alternatively, and cringe-worthy, in my opinion, you could use an image.
Like youtag's answer, my solution uses pseudo-elements—but my underline only runs the length of the text and can wrap onto multiple lines (with an underline running beneath each line of text).
Basically, I manually cap the ends of the element's border with pseudo-element circles before and after the element:
h1 a {
text-decoration: none;
position: relative;
border-bottom: 15px solid;
padding-bottom:3px;
}
h1 a:hover, h1 a:focus {
border-bottom: 15px solid #eb6d32;
}
h1 a:before, h1 a:after {
content: '';
height: 15px;
width: 15px;
background-color: currentColor;
border-radius: 15px;
position: relative;
display: inline-block;
vertical-align: text-bottom;
margin-bottom: -18px;
}
h1 a:before {
left: .2ex;
margin-left: -.4ex;
}
h1 a:after {
margin-right: -.4ex;
right: .2ex;
}
I use left and right on the pseudo-elements so the ends don't stick out too far past the text.
See my codepen.
you can do that by using a div beneath the text and setting its border-radius to 2000px. i think that will be simpler
HTML:
<div class="wrapper">
<span>Hell World</span>
<div class="underline"></div>
</div>
CSS:
.underline{
height:0px;border: 3px solid black;
border-radius: 2000px;
}
.wrapper{
display:inline-block;
}
JQUERY SNIPPET:
var arbitrarynumber = 5
$('.underline').width($('.underline').parent().width()-arbitrarynumber)