How to get triangle layout of 'mission' section within the container only without using "polygon". I don't want it to flow outside the container.
You can make triangles using border property of css.
Check out this link for more shapes : https://css-tricks.com/examples/ShapesOfCSS/
.container {
position: relative;
}
.mission {
position: absolute;
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 100px solid transparent;
border-top: 150px solid red;
border-bottom: 0px solid transparent;
}
.mission + div {
position: absolute;
}
.content {
position: absolute;
width: 350px;
height: 200px;
background: lightgrey;
padding-left: 100px;
}
<div class="container">
<div class="content">
Content
</div>
<div class="mission">
</div>
<div>
Mission
</div>
</div>
Related
I need to achieve something like this:
representation
I have found similar issues but they do not completely cover my task. Here is an example of a thing I have found:
.blue-background {
background-color: blue;
border-radius: 5px;
top: 3em;
left: 230px;
padding: 10px;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 22px;
color: #313333;
display: flex;
align-items: center;
width: 260px;
}
.blue-background::after {
content: ' ';
width: 0px;
height: 0px;
border-top: 25px solid transparent;
border-left: 37px solid blue;
border-bottom: 25px solid transparent;
border-right: 0px solid transparent;
position: absolute;
top: 43%;
left: 47%;
}
.child-image-wrapper {
max-width: 260px;
margin: auto;
img {
max-width: 260px;
}
}
<div class="col-md-4 col-xs-12">
<div class="image-block">
<div class="blue-background">
<h2>Some Text <span class="arrow"></span></h2>
</div>
<div class="child-image-wrapper">
<img src="This is an image" />
</div>
</div>
Now the problem with the above CSS is that this works only at particular screen size (like 585px or so) otherwise the arrow "detaches" from the left div and goes into the right div. What I need is for the blue arrow to be stuck to the left div even if the screen size changes. Would it be possible to achieve this in some way? Sorry I am pretty new to front-end design
You can do it like so:
.wrapper {
width: 10em;
height: 2em; /* Height needs to match .right::after height and width */
display: flex;
}
.left {
background-color: lightblue;
width: 50%;
}
.right {
background-color: lightpink;
border-left: 1px solid purple;
width: 50%;
position: relative;
overflow: hidden;
}
.right:before {
height: 2em; /* Match height above*/
width: 2em; /* Match height above*/
background-color: #b77681;
position: absolute;
top: 50%;
left: 0%;
content: "";
border: 1px solid #864954;
transform: translate(-73%, -50%) rotate(45deg);
}
<div class='wrapper'>
<div class='left'>
</div>
<div class='right'>
</div>
</div>
I encourage you to read more about the position property (in our case specifically absolute and relative). here you can find some introduction.
As per your question change the top and left properties in .blue-background::after to fit the position for the arrow as you want.
here is an example: https://jsfiddle.net/qa9un7fy/
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;
}
I have a parent div that contains a child that is aligned to the bottom right corner of the parent. The child has text within it that I am trying to get to display correctly.
As it is currently set up, the contents of the child has placed the text to the right side instead of within.
CSS:
.container {
background-color: red;
height: 200px;
width: 400px;
position:relative;
}
.gradeTriangle{
width: 0px;
height:0px;
border-bottom: 50px solid #000;
border-left: 50px solid transparent;
bottom: 0;
right: 0;
position: absolute;
color: green
}
HTML:
<div class="container">
<div class="gradeTriangle">
$25
</div>
</div>
Fiddle:
http://jsfiddle.net/vh7m8gey/1/
Output:
I am trying to get the $25 to be centered in the black triangle that is on the bottom right of the child.
How should i approach this?
I created a container for the amount with absolute position right 3px and bottom -45px.
.container {
background-color: red;
height: 200px;
width: 400px;
position:relative;
}
.gradeTriangle{
width: 0px;
height:0px;
border-bottom: 50px solid #000;
border-left: 50px solid transparent;
bottom: 0;
right: 0;
position: absolute;
color: green
}
.amountContainer{
position:absolute;
padding:1%;
bottom:-45px;
right:3px;
}
<div class="container">
<div class="gradeTriangle">
<div class="amountContainer">$25</div>
</div>
</div>
Look at this. You need to insert for example span inside gradeTriangle, and position It using css.
.gradeTriangle span {
position: absolute;
bottom: -40px;
right: 0px;
}
HTML:
<div class="container">
<div class="gradeTriangle">
<span>$25</span>
</div>
</div>
You can easily create the triangle as background of the main container:
.container {
background:
linear-gradient(to bottom right,transparent 49.8%,#000 50%) bottom right/50px 50px no-repeat,
red;
height: 200px;
width: 400px;
position: relative;
}
.gradeTriangle {
bottom: 5px;
right: 5px;
position: absolute;
color: green
}
<div class="container">
<div class="gradeTriangle">
$25
</div>
</div>
Need to add some style to get the design, added the following style for gradeTriangle
.gradeTriangle{
position:absolute;
right:0;
bottom:0;
width: 60px;
height: 60px;
border-bottom: solid 30px black;
border-right: solid 30px black;
box-sizing: border-box;
color:#fff;
border-left: solid 30px transparent;
border-top: solid 30px transparent;
}
please check the sample code.
I have a wordpress page, and I would like to add a bottom border to the post, according to the post category.
If post has only 1 category, then I use:
.category-daily {
border-bottom: red solid 3px;
}
But there are posts who have 2 categories, and therefore 2 classes, for example: category-weekly and category-daily
What can I do to add a red bottom border for daily category and after that add a yellow bottom border for weekly category
Elements cannot have two borders..but you can fake it with a pseudo-element.
body {
text-align: center;
}
div {
height: 100px;
width: 150px;
display: inline-block;
box-shadow: inset 0 0 1px 0 black;
/* for demo purposes only */
padding-bottom: 6px;
position: relative;
}
.category-daily:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-bottom: red solid 3px;
}
.category-weekly:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-bottom: yellow solid 3px;
}
.category-daily.category-weekly:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-top: red solid 3px;
border-bottom: yellow solid 3px;
}
<div class="category-daily"></div>
<div class="category-weekly"></div>
<div class="category-daily category-weekly"></div>
There is no possibility to define more than one border bottom.
If you wish to achive such visual result you have to add an extra element for each category you're applying.
For example with div element for each category:
html
<div class="post">
<div class="daily"></div>
<div class="weekly"></div>
</div>
css
.post .daily{
background:red;
height:1px;
width:100%;
}
.post .weekly{
background:yellow;
height:1px;
width:100%;
}
Or even better: a hr for each category
html
<div class="post">
<hr class="daily"/>
<hr class="weekly" />
</div>
css
.post .daily{
background-color:red;
color:red;
border:0;
height:1px;
}
.post .weekly{
background-color:yellow;
color:yellow;
border:0;
height:1px;
}
One option is to use box-shadow for the other border, like this:
.daily {
border-bottom: 3px solid red;
}
.weekly {
box-shadow: 0 3px 0 yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="daily">This is daily</div>
<div class="daily">This is daily</div>
<div class="weekly">This is weekly</div>
<div class="daily">This is daily</div>
<div class="daily weekly">This is daily and weekly</div>
<div class="weekly">This is weekly</div>
<div class="daily">This is daily</div>
</body>
</html>
You can't have two border-bottoms, but if you're comfortable with jquery, this may work for you:
$('.category-daily.category-weekly').wrap('<div class="bbottom"></div>');
div{
width: 60px;
height: 60px;
}
.category-daily.category-weekly {
border: 1px solid black;
border-bottom: 9px solid red;
}
.category-daily{
border: 1px solid black;
border-bottom: 9px solid red;
}
.category-weekly {
border: 1px solid black;
border-bottom: 9px solid yellow;
}
.bbottom{
padding-bottom: 9px;
border-bottom: 9px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class='category-daily category-weekly'>
</div>
<br>
<div class='category-daily'>
</div>
<br>
<div class='category-weekly'>
</div>
This wraps a div with both classes with another div which contains the secondary border-bottom.
I am trying to display a few words inside of a CSS styled arrow. I have figured out how to create an arrow with CSS which works fine. however, when I place the arrow within <h2>, complete arrow is not being displayed.
The source code is as follows
HTML
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
STYLE
<style>
.arrow-right::after{
content: "";
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
}
</style>
The output is as follows
The arrow pointer is not being displayed completely. Am I using the elements wrongly? I will need the div / h2 height to be bigger later, but at least that is not my concern right now since the arrow itself is not being displayed as desired.
Edit:
Sorry for my bad drawing. This sample below is what I want but of course the arrow would be lots nicer I just used paints to give it a quick draw.
Is this what you're looking for?
http://jsfiddle.net/61tc5em9/2/
HTML
<div id="container">
<div id="arrow">text text text</div>
<div id="content">text text text text</div>
</div>
CSS
#container {
height: 75px;
background-color: black;
position: relative;
white-space: nowrap;
}
#arrow {
width: 30%;
background-color: red;
text-align: center;
font-size: 1.5em;
line-height: 75px;
}
#arrow::after {
content: "";
border-top: 37px solid transparent;
border-bottom: 38px solid transparent;
border-left: 50px solid red;
position: absolute;
left: 30%;
}
#content {
color: yellow;
font-size: 1.5em;
position: absolute;
left: 50%;
top: 25px;
}
Hope this helps. Let me know if you need any changes.
You need font-size:0; for the arrow.
.arrow-right::after {
content: "";
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid green;
font-size: 0;
position: relative;
top: -8px;
}
span{
display: inline-block;
}
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
Recommendations for improving your code and make it more dynamic:
Use :after in the statement element itself (this way you will avoid
the extra code in html and you can position the arrow relative to the element).
Align it to the right using left: 100% (so it is always position to
the right regardless of the width of the arrow).
Use top: 50% and margin-top: -(height/2)px to center it vertically.
Just like this:
.wrapper {
padding: 2px 0;
background: yellow;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent; /*change the border width to set the desired hieght of the arrow*/
border-bottom: 15px solid transparent;
border-left: 15px solid green; /*change the border width to set the desired width of the arrow*/
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">This is what I want</span>
<span style="margin-left: 50px;">is this what you want?</span>
</h2>
</div>
Note that in this way you have a more semantic code because you don't have dummy element in your html and if you want more statement it will put the arrow behind automatically like this:
.wrapper {
padding: 2px 0;
background: yellow;
margin-bottom: 10px;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">One statement</span>
<span style="margin-left: 50px;">Good</span>
<span class="statement">Two statement</span>
<span style="margin-left: 50px;">Great</span>
</h2>
</div>
<div class="wrapper">
<h2>
<span class="statement">Where is the arrow?</span>
<span style="margin-left: 50px;">Do not worry about it</span>
</h2>
</div>