I am trying to code a responsive div with css triangles on each side that has a color the same as my background color, however it breaks when the text gets wraps onto a new line.
Is there any way to code css triangles in a responsive way, where the triangles will grow in height with the text that is wrapping?
.d-block {
background-color: #fff;
height: 60px;
padding: 0;
margin: 30px 0 0 0;
color: #0769ba;
font-size: 1.8rem;
&:before {
position: absolute;
left: 0;
content: "";
border-top: 30px solid #fff;
border-bottom: 30px solid #fff;
border-left: 30px solid #0769ba;
}
&:after {
position: absolute;
right: 0;
content: "";
border-top: 30px solid #fff;
border-bottom: 30px solid #fff;
border-right: 30px solid #0769ba;
}
}
<div class="d-block">This is a specials block and is 100% wide responsive</div>
Related
hi everyone i am not good at front but i need to make a text bubble like this:
speechBubble
my best attempt was this but I need to lower the diamond in half to make it look acceptable: myspeechBubble
if anyone knows how to do it in css I would really appreciate it, i need to place 3 different bubbles with one pointer in the middle, left and right
You can use the below as your starting point and adjust the positions according to your needs.
Make use of psuedo selectors to achieve the same. ( there may be limitations on the styling properties)
.box {
width: 150px;
height: 75px;
background-color: black;
color: #fff;
padding: 20px;
position: relative;
margin: 40px;
float: left;
}
.box.arrow-top {
margin-top: 40px;
}
.box.arrow-top:after {
content: " ";
position: absolute;
right: 30px;
top: -15px;
border-top: none;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid black;
}
.box.arrow-right:after {
content: " ";
position: absolute;
right: -15px;
top: 15px;
border-top: 15px solid transparent;
border-right: none;
border-left: 15px solid black;
border-bottom: 15px solid transparent;
}
.box.arrow-bottom:after {
content: " ";
position: absolute;
right: 30px;
bottom: -15px;
border-top: 15px solid black;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: none;
}
.box.arrow-left:after {
content: " ";
position: absolute;
left: -15px;
top: 15px;
border-top: 15px solid transparent;
border-right: 15px solid black;
border-left: none;
border-bottom: 15px solid transparent;
}
<div class="box arrow-top">
This is a box with some content and an arrow at the top.
</div>
<div class="box arrow-right">
This is a box with some content and an arrow on the right.
</div>
<div class="box arrow-bottom">
This is a box with some content and an arrow at the bottom.
</div>
<div class="box arrow-left">
This is a box with some content and an arrow on the left.
</div>
.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
}
<div class="myButton">
Submit
</div>
The above is my code. As you can see I want to design a shape like the image below but I want the word Submit to be in the center but it is pushed down.
Anyone know a solution?
You can use linear-gradient background for this. Techique is based on setting fixed height and then applying padding equals height multiplied by √2:
.my-button {
border: 0;
height: 40px;
background: linear-gradient(45deg, transparent 40px, pink 40px);
padding-left: 56.5691px; /* 40 × √2 ≈ 56.5691 */
}
<button class="my-button">Submit</button>
Also you can achieve this via absolutely position pseudoelement:
.my-button {
background-color: pink;
position: relative;
height: 40px;
margin-left: 40px;
border: 0;
}
.my-button:after {
content: "";
position: absolute;
top: 0;
left: 0;
/* Move pseudoelement to the left to 100% of its width */
transform: translateX(-100%);
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
}
<button class="my-button">Submit</button>
The issue with what you have is that you're using a top border instead of a background so your text naturally won't look to be in the center of your shape. What you can do is use positioning to manually move your text up within the shape:
.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
position: relative;
}
.inner {
position: absolute;
top: -30px;
left: 40px;
}
<div class="myButton">
<div class="inner">Submit</div>
</div>
I have the following div which aligns to the left side of the screen
css
#nav {
position: fixed;
height: 50px; width: 50px;
display: block;
background-color: #000;
}
This div contains an icon acting as a link
html
<div id="nav">icon</div>
I want the div to be a triangle (pointing towards the right) and not a square
I find this site useful: https://css-tricks.com/examples/ShapesOfCSS/
Right-facing triangle:
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
You can adjust the border properties to change the width, height, and color of the triangle.
Something like this is probably what you're looking for: https://jsfiddle.net/kh2xsoh2/1
HTML
<div id="nav"><span>icon</span></div>
CSS
#nav {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #000;
border-bottom: 25px solid transparent;
position: fixed;
}
#nav span {
position: absolute;
line-height: 0;
left: -45px;
color: white;
}
Is there a way to create a trapezoid shadow effect underneath a image such as the one in the image?
I only know create trapezoid with border. What i've came up with so far is this:
HTML
<div id="trapezoid"></div>
CSS
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
}
Thanks in advance.
I've created a jsFiddle that demonstrates a way to do it. In essence: give the image a shadow, overlay a transparent div on it that hides left, top and right border of the shadow. Because of these white borders this trick will not work if you use a complex background.
.wrapper {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
.wrapper img {
box-shadow: 0 0 50px black;
margin: 0px 30px 50px 30px;
}
.wrapper .overlay {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
height: 100%;
border-top: 0px solid white;
border-left: 30px solid white;
border-right: 30px solid white;
border-bottom: 50px solid transparent;
box-sizing: border-box;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/eg2RH.jpg" width="400" />
<div class="overlay"></div>
</div>
I'm trying to create a dropdown from scratch
I want to add an arrow at the end of the container, but it keeps getting confined to be next to the text instead. If the span is a block element with a width of 100% and using :after for the arrow, why is it next to the text and not near the end of the element?
<div id="wrap" style="border: solid 1px green; width: 100%;">
<span style="border: solid 1px blue; width: 100%; display: block;">z</span>
</div>
span:after {
display: inline-block;
content: " ";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaaaaa;
padding-top: 2px;
position: relative;
}
http://jsfiddle.net/my272eze/
if I did it on the container instead (#wrap) the arrow appears on a new line.
http://jsfiddle.net/my272eze/3/
how would I get it within the container?
Try to add
float: right;
margin: 6px;
to the the pseudo element
The Fiddle Example
position: absolute to the span tag and position relative to the span:after. Then move the arrow with left: x amount of pixels. JSFIDDLE
span{
position: absolute;
}
span:after {
display: inline-block;
content: " ";
width: 0;
height: 0;
left: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaaaaa;
padding-top: 2px;
position: relative;
}