Can't understand how to make this trick or this with css. I mean the header and the flag. The line is not straight. They are inclined/sloping bordered.
Could you, please, give an example or just exmplain this works?
Have a look at https://jsfiddle.net/josedvq/3HG6d/
HTML
<div class="triangle-up-left"></div>
CSS
.triangle-up-left {
width: 0;
height: 0;
padding-bottom: 10%;
padding-left: 10%;
overflow: hidden;
}
.triangle-up-left:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-bottom: 500px solid transparent;
border-left: 500px solid #4679BD;
}
They use a trick where you make some borders transparent in order to create a triangle. More information about this technique at How do CSS triangles work?
Related
I'm looking to replicate the following design in CSS:
So far I've done the following:
.bb-title::before{
content:'';
position: absolute;
background-color: #7D18FD;
width: 25%;
height: 3px;
bottom: 0;
}
<h2 class='f2 mt4 bb-title relative'>
What people are saying
</h2>
But this isn't responsive.
See the Codepen.
What is the best way to achieve a bottom border on titles, where the border will always be the same width as the title?
follow these steps:
.bb-title {
position: relative;
display: inline-block;
}
.bb-title::before {
content: '';
position: absolute;
background-color: #7D18FD;
width: 100%;
height: 3px;
bottom: -5px;
left: 0;
right: 0;
}
Try adding this and remove the old styling
.bb-titlee{
position: relative;
border-bottom: 3px solid #7D18FD;
display: inline;
padding: 0;
margin: 0;
}
h2 elements are displayed as blocks as default, if we set it to inline it will wrap around the text and contain that width.
You can make the element inline and then add a bottom border to it like the code bellow:
.bb-title{
display: inline;
border-bottom: 3px solid #7D18FD;
}
Try
.bb-title
{
display:inline;
border-bottom: 5px solid #7D18FD;
padding-bottom: 10px;
}
Html :
<div class='d-flex fl'>
<h2 class='f2 mt4 header'>What people are saying</h2>
<div class='line'></div>
</div>
Css:
.header{
margin:0 !important
}
.line{
flex: 1;
border:1px solid #7D18FD;
}
I would like to add a white border over all my images in my content div using css. Images in the header and footer div areas should not be affected. how do I achieve this? See example image below. There are images of different sizes on the web pages.
See image:
You can do this without having an extra element or pseudo element:
http://cssdeck.com/labs/t6nd0h9p
img {
outline: 1px solid white;
outline-offset: -4px;
}
IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline
Alternate solution that doesn't require knowing the dimensions of the image:
http://cssdeck.com/labs/aajakwnl
<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>
div.ie-container {
display: inline-block;
position: relative;
}
div.ie-container:before {
display: block;
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 1px solid white;
}
img {
vertical-align: middle; /* optional */
}
You could try this:
Html:
<div class="image">
<div class="innerdiv">
</div>
</div>
Css:
.image
{
width: 325px;
height: 239px;
background: url("https://i.picsum.photos/id/214/325/239.jpg?hmac=7XH4Bp-G9XhpuKz5vkgES71GyXKS3ytp-pXCt_zpzE4") 0 0 no-repeat;
background-size: cover;
padding: 10px;
}
.innerdiv
{
border: 1px solid white;
height:100%;
width: 100%;
}
jsFiddle
Hope this is what you meant :)
I solved this with box-shadow: inset and it works with IE11 and up. I wanted a border in the corners around the image but this examples have the border 10px inset. It requires a parent div with :before or :after element but handles it very well.
.image {
width: 100%;
height: auto;
}
.image__wrapper {
position: relative;
}
.image__wrapper:before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
box-shadow: inset 0 0 0 3px red;
}
CodePen Demo
Whatever the div ID or class is you can simply add
#yourDivIDExample {
...
}
#yourDivIDExample img{
border:1px solid #ffffff;
}
This will create a border around the images in the div itself.. same works for classes or global rule also ..
img {
border:1px solid #ffffff;
}
You can do something like this DEMO
HTMl
<div class="imgborder">
<div class="in-imgborder">
</div>
</div>
CSS
.imgborder {
width: 300px;
height: 300px;
position: relative;
background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
width: 290px;
height: 290px;
position: absolute;
top: 4px;
left: 4px;
border: 1px solid red;
}
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 would like to make a div that has a margin-top: -110px, but I want to add a border-right on it starting from the top of the div, but without the margin-top: -110px attribute.
I know I could use two or more div, but it needs to be done with only 1. Can it be done with CSS or I need to use JavaScript?
You can achieve this using the CSS pseudo-elements:
div {
width: 100px;
height: 200px;
border-top: 100px solid red;
position:relative;
background-color: gray;
}
div:after {
display: block;
position:absolute;
content:" ";
width: 0;
height: 100%;
border-right: 3px solid lime;
top: 0;
right:-3px;
}
http://jsfiddle.net/6W2KP/5/
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.