I'm used my Angular-6 project for the ng-bootstrap and i used ngbootstrap-pills, i tried to add active pills to drop down icon with removing button option, but its not working, anyone know how to do that correctly.
here with stack blitz code
this is my .css code
.nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
}
a:after {
content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
I tried to do like this image
Thanks.
This solution doesn't need .svg's to work.
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
position: relative;
}
::ng-deep .nav-pills .nav-link.active:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
display: block;
left: 35%;
bottom: 0;
}
https://stackblitz.com/edit/angular-aticm5-5nnhz3
Try using ::ng-deep selector to apply the styles. Otherwise the styles won't be applied to the library.
In your case it would be:
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
color: #fff;
background-color: #262262;
}
::ng-deep a:after {
content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
bottom: -1px;
left: 50%;
margin: 0 0 0 -3px;
z-index: 100;
}
You can also read about Angular View encapsulation.
Hi I have modified some minor changes to your code please check out this StackBlitz Link
https://stackblitz.com/edit/angular-aticm5-2ghoez
Hope this will help you
I found some solution
Stackblitz
::ng-deep .nav-pills .nav-link.active:after {
content: '';
display: block;
position: absolute;
left: 6px;
top: 100%;
width: 0;
height: 0;
border-top: 7px solid #262262;
border-right: 13px solid transparent;
border-bottom: 0 solid transparent;
border-left: 15px solid transparent;
}
::ng-deep .nav-pills .nav-link.active, .nav-pills.show> .nav-link {
display: inline-block;
position: relative;
background: #262262;
padding: 8px 0;
}
Related
I'm struggling to make a group button which background get changed on the active path, it may look something like this
I tried an approach but faced some border implementation errors in it, is that body have some better approach to make these button groups?
https://codesandbox.io/s/quizzical-bohr-uczl0?file=/src/App.js
With flex it's not going to work out. My idea is to have a before arrow and an after arrow on each other. The bottom arrow is 1px to the right:
.menu {
background: #efefef;
}
.item {
width: 140px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
color: #000;
background: #efefef;
position: relative;
display: inline-block;
float: left;
padding-left: 10px;
box-sizing: border-box;
}
.item.active{
background-color: #0172B6;
color: #fff;
}
.item:before{
content: '';
position: absolute;
right: -25px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #efefef;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 1
}
.item.active:before{
content: '';
position: absolute;
right: -25px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #0172B6;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 2
}
.item.active:after{
content: '';
position: absolute;
right: -26px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #efefef;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 1
}
.menu .item:last-of-type:before,
.menu .item.active:last-of-type:before,
.menu .item.active:last-of-type:after{
display: none
}
<div class="menu">
<div class="item">Fabric</div>
<div class="item active">Style</div>
<div class="item">Contrast</div>
</div>
I want to recreate the button and the border around the League of Legends Play For Free button.
The problem for me is recreating that border with the cut corners. I do not need the animations.
After inspecting their page elements, I could not find any elements responsible for them, and they do not seem to be using CSS to achieve this. I tried turning off a lot of the CSS, and they seem to persist on the page. Could someone please enlighten me on how they are making these borders, or how I can achieve this with pure CSS?
Do you mean a button like the one in this example?
https://codepen.io/awesammcoder/pen/RYVwxa
body {
background: #333;
}
.button {
font-size: 12pt;
color: white;
background: transparent;
display: inline-block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid white;
margin: 20px;
position: relative;
letter-spacing: 1px;
outline: none;
}
.button:before {
content: '';
width: 20px;
height: 20px;
background: #333;
border: 3px solid white;
transform: rotate(45deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: -12px;
left: -13px;
}
.button:after {
content: '';
width: 20px;
height: 20px;
background: #333;
border: 3px solid white;
transform: rotate(-132deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: auto;
right: -13px;
bottom: -12px;
}
<button class="button">Play now</button>
I want to cut two corners of a button with a 3px solid border and no background, like the example below, preferably with only CSS. I tried many options and searched the web, but no luck so far... Do you guys know a way to achieve this? Thanks for any response!
What I got so far is:
a.button{
padding: 10px 18px;
border: 3px solid $blue;
text-transform: uppercase;
font-size: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}
The problem is that this results in a radius corner, and I want the corners to be a straight cut.
This should help you get started.
You can refine it according to your needs.
.button {
display: inline-block;
text-transform: uppercase;
text-decoration: none;
padding: 10px 20px;
border: 3px solid #3777BC;
margin: 20px;
position: relative;
color: #3777BC;
letter-spacing: 1px;
}
.button:before {
content: '';
width: 20px;
height: 20px;
background: #fff;
border: 3px solid #3777BC;
transform: rotate(45deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: -12px;
left: -13px;
}
.button:after {
content: '';
width: 20px;
height: 20px;
background: #fff;
border: 3px solid #3777BC;
transform: rotate(-132deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: auto;
right: -13px;
bottom: -12px;
}
Newsletter Signup
I need to find a responsive solution to the following code.
HTML:
<span> </span><span> </span><span>YES!</span>
CSS:
span {
color: #bac12d;
background-color: #213d55;
display: inline-block;
position: relative;
margin-right: 10px;
margin-left: 30px;
font-size: 80px;
line-height: 1;
}
span:before {
content: "";
display: inline-block;
border-left: 20px solid transparent;
border-top: 40px solid #213d55;
border-right: 0px solid #213d55;
border-bottom: 40px solid #213d55;
position: absolute;
z-index: -1;
top: 0;
left: -20px;
}
span:after {
content: "";
display: inline-block;
border-left: 20px solid #213d55;
border-top: 40px solid transparent;
border-right: 0px solid transparent;
border-bottom: 40px solid transparent;
position: absolute;
z-index: -1;
top: 0;
right: -20px;
}
span:nth-child(-n+2){
width: 0px;
}
Here is my fiddle:
http://jsfiddle.net/283azx0t/
Is it possible to make it responsive so that it follows font-size?
Yes this is possible with media query. As per the different screen size change the font size and also the background arrow size.
Yes this is possible with EM units.
Here is a rough fiddle:
http://jsfiddle.net/zbetxu8g/1/
Here is something like what you want to do for the approach, but choose better em measurements:
span:before {
...
border-left: 2em solid transparent;
border-top: 4em solid #213d55;
border-right: 0px solid #213d55;
border-bottom: 4em solid #213d55;
...
left: -2em;
}
This question already has answers here:
Aligning css arrow boxes
(6 answers)
Closed 8 years ago.
Hello i would like to style the borders of my list element so that the border-top-right and the border-bottom-right meet in a triangular shape with only css.
like so:
or like so:
I want to achieve both of these two shapes using css alone, to maybe alter the borders to that shape, i would like to know if that is possible and how i can go about it. The element in question is a list element.
If you're after that specific shape, you can use the :before and :after pseudo elements
Demo Fiddle (second shape)
HTML
<div></div>
CSS
div {
display:inline-block;
position:relative;
height:30px;
width:50px;
background:Red;
}
div:before, div:after {
content:'';
position:absolute;
display:inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 26.0px;
}
div:after {
border-color: transparent transparent transparent red;
right:-26px;
}
div:before {
border-color: transparent transparent transparent white;
}
code for your shapes:-
#breadcrumbs-two{
overflow: hidden;
width: 100%;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}
DEMO
div {
background: #EF3E36;
margin: 10px;
}
.arrow1 {
position: relative;
left: 50px;
width: 250px; height: 100px;
}
.arrow1:before {
display: block;
content: "";
width: 0;
height: 0;
position: absolute;
left: -50px;
border: 50px solid #EF3E36;
border-left: 50px solid transparent;
border-right: 0;
}
.arrow1:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 250px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}
.arrow2 {
position: relative;
width: 300px; height: 100px;
}
.arrow2:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 300px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}