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.
Related
As you can see on this link there is en block with a little point on the left side
I was wondering if there is not just a class to make a block with a little point on the left. Without using css? just like class="img-circle" for example where it makes it round.
this pointer
HTML
<div class="triangle">here we talk!!</div>
CSS:
.triangle{
position: relative;
width: 100px;
height: 100px;
color: white;
background-color: rgba(0,0,0,.8);
}
.triangle:after{
position: absolute;
left:-10px;
top: 18px;
content: '';
width: 0;
height: 0;
border-right: solid 10px rgba(0,0,0,.8);
border-bottom: solid 10px transparent;
border-top: solid 10px transparent;
}
Explain:
in the div you create the square in css I define it...
in :after I defined the triangle
If you want to change the background color you have to change both of them
Ok. I have an Angular2 application. Im using an angular component called flex-layout (that let me work with flexbox through directives, thats all). Then, i have a div with class="row" and a dynamic amount of divs inside it. Each dynamic div have an image inside of it.
I need to mark one of those divs as selected, and then add an specific class to it. That class has to put a border-bottom and a background color (already do that), but i need to add a little triangle at the middle of the border-botom on selected div.
Work already done
Fail when selecting another div
As you see on the above images, i managed to put that triangle on the middle of all row (no matter what div i selected)
But, when i change the selected div, triangle doesnt move at all. It always stays at center of the row, and i need the triangle be at the center of selected div instead.
changeSelectedBrand(brandId: number) {
this.selectedBrand = brandId;
}
div.image-row {
height: 90px;
max-height: 90px;
width: 100%;
max-width: 100%;
margin: 0px;
padding: 20px;
background-color: #EEEEEE;
}
.div-image-row-selected {
background-color: #DDDDDD !important;
border-bottom: 3px solid mat-color($primary,400);
}
.div-image-row-selected:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 0;
height: 0;
border-top: solid 10px mat-color($primary,400);
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
div.image-row > img {
height: 65px;
}
<div fxLayout="row">
<div fxFlex="100%" fxLayoutAlign="center center" class="image-row" *ngFor="let brand of brands" [ngClass]="{'div-image-row-selected': brand.id === selectedBrand}" (click)="changeSelectedBrand(brand.id)">
<img src="{{brand.url}}" />
</div>
</div>
The snippet is not functional, i know... is just to show you how things are done right now.
So, repeat the question: How can i make that triangle to move to the center of the bottom border of a selected div?
Thank you
put a position relative wrapper for div.image-row and then update the triangle style(.div-image-row-selected:after) with required left.
div.image-row {
height: 90px;
max-height: 90px;
width: 100px;
max-width: 100%;
margin: 0px;
padding: 20px;
background-color: #EEEEEE;
position: relative;
}
.div-image-row-selected:after {
content: '';
position: absolute;
top: 100%;
left: calc(50% - 10px);
right: 0;
width: 0;
height: 0;
border-top: solid 10px #ff0000;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
I'm trying to create a div that has a left and top border with text in top line. what I am trying to achieve is the following...
html half box
I am able to get the top with the text using the following css or alternately a table but can't get it with the left border also. any 'outside the box' thinkers?
.hr-sect {
display: flex;
align-items: center;
color: blue;
margin: 8px 0px;
}
.hr-sect::before
{
content: "";
width: 20px;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
.hr-sect::after {
content: "";
width:100%;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
CATEGORY
CATEGORY
You can simulate that interrupted border line by using an absolutely placed div that has a non-transparent background, just make sure it matches the actual background color.
.half-box {
border-left: 1px solid black;
border-top: 1px solid black;
position: relative;
padding: 30px;
}
.half-box > .title {
background-color: white;
padding: 0 10px;
position: absolute;
top: 0;
left: 30px;
font-size: 20px;
transform: translateY(-50%);
}
<div style="height: 100px">
</div>
<div class="half-box">
some content
<div class="title">
CONTENT
</div>
</div>
Set a positioning context on the outer box with position: relative;
For the border, use a pseudo ::before element with content: " "; and give it a position: absolute; to take it out of the flow. Give it a top and left border.
For the heading, also use position: absolute; and move it up with top: -20px or whatever. Set the same background color as the outer box to mask the border.
Adjust your margins and paddings as needed.
See this codepen: https://codepen.io/matthewsmith_io/pen/RVYQqy
Hello I was recently browsing around some demo for websites for client. And saw a really cool thing I liked. So I try to inspect in the browser to see if I replicate the effect on my own. And I have no idea how they did it.
here is the link to the demo
http://www.templatemonster.com/demo/45057.html
And here is a n image to show what I'm talking about.
They have these squares with an overflow at the bottom looking like multiple elements.
I was able to grab the HTML/CSS and replicate the just one box without the overflow. But I can't figure out how to make it look like stacked boxes, nor can I find where the code is.
I tried to replicate using JSFidle as you can see here
HTML
<div class="span2"><div class="service-box boxed green"><figure class="icon"><i class="icon-file-alt"></i></figure><div class="service-box_body"><h2 class="title">Accounting valuations</h2></div></div> </div>
.service-box.boxed {
border-radius: 0px;
box-shadow: none;
padding: 25px 15px;
margin-bottom: 30px;
text-align: center;
position: relative;
background: none repeat scroll 0% 0% #F1F6F9;
overflow: visible;
border: 1px solid #C5D0D2;
}
http://jsfiddle.net/w1defmkz/
You're pretty close but missing the :before and :after pseudo elements:
.service-box.boxed:before, .service-box.boxed:after {
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
}
.service-box.boxed:before, .service-box.boxed:after {
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
}
.service-box.boxed:after {
left: 3px;
right: 3px;
bottom: -7px;
}
Here's an updated fiddle: http://jsfiddle.net/w1defmkz/1/
Well, The user has added two more divisions, made them absolute.
You see, the whole span (class = "span2") is positioned relative.
This is the css for the one of them...
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
Js Fiddle: http://jsfiddle.net/3my6rhgL/
There are two spans side by side. The first one holds a caret and the other one has text.
I am trying to acheive the text alignment as in pic1, but what i get is pic2.
This can be acheived by using a table instead of ul li i know, but is there any other way by css
<ul>
<li>
<span><b class="right-caret"></b></span>
<span>
Click here to know how to provide the feedback.
</span>
</li>
<li>
<span><b class="right-caret"></b></span>
<span>
Unable to Login or use the feedback form?
Please report it here.
</span>
</li>
</ul>
Pic 1:
Pic 2:
http://jsfiddle.net/hc6kajv2/
A simple (maybe not elegant) solution is to set the lis to position: relative and the arrow to position: absolute:
.right-caret {
position: absolute;
left: -15px;
top: 5px;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid red;
display: inline-block;
height: 0;
}
FIDDLE
Use this instead of span With bullet , Without bullet
li:before {
content: "";
border-color: transparent red;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
EDIT
You have a margin-left clear it
http://jsfiddle.net/hc6kajv2/2/