I'm having difficulty adding a box shadow around the outline of the arrow that was generated using border properties. Is there a way to make the box shadow in the shape the same as the arrow instead of a square box?
Here's a jsfiddle.
HTML:
<a class="bx-prev"></a>
<a class="bx-next"></a>
CSS:
.bx-prev, .bx-next {
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
top: 200px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
Try this.
Edit!
.bx-prev, .bx-next {
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
top: 200px;
-webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
<a class="bx-prev"></a>
<a class="bx-next"></a>
You can try the blur filter by creating the same arrow with a pseudo element:
.bx-prev,
.bx-next {
top: 200px;
position:relative;
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
/*the arrow*/
.bx-prev:before,
.bx-next:before,
.bx-prev:after,
.bx-next:after{
content:"";
position:absolute;
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
}
/*the shadow*/
.bx-prev:after,
.bx-next:after{
border-color: red;
z-index:-1;
filter:blur(5px);
}
<a class="bx-prev"></a>
<a class="bx-next"></a>
Related
I've managed to set an outline but it's not going around the arrow but around the whole box. Is there a fix for this?
.arrows {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
.arrow {
border: solid #49fb35;
border-width: 0 10px 10px 0;
display: inline-block;
padding: 25px;
outline: solid black;
outline-width: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<div class="arrows">
<i class="arrow down"></i>
</div>
The outline will make an outline to the whole box, if you want the outline to surround only the border, it would be tricky, this might be what you're looking for if you want CSS only solution.
.arrows {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
.arrow {
border: solid #49fb35;
border-width: 0 10px 10px 0;
display: inline-block;
padding: 25px;
box-shadow: 3px 3px 0px 2px black, inset -3px -3px 0px 2px black
}
.arrow:before {
content: '';
width: 3px;
position: absolute;
left: 0;
bottom: -15px;
z-index: 100;
background: #000;
height: 16px;
}
.arrow:after {
content: '';
width: 16px;
position: absolute;
right: -15px;
top: 0;
z-index: 100;
background: #000;
height: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<div class="arrows">
<i class="arrow down"></i>
</div>
I am not sure if this is quite what you are looking for but might be useful starting point.
.arrows {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
.arrow {
border: solid #49fb35;
border-width: 0 10px 10px 0;
display: inline-block;
padding: 25px;
box-shadow: 1px 1px 1px #000;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<div class="arrows">
<i class="arrow down"></i>
</div>
you can you ::before & ::after css to achieve this.
.arrows {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
.arrow {
border-width: 0 10px 10px 0;
display: inline-block;
padding: 25px;
position: relative;
}
.arrow::after {
content: '';
width: 10px;
height: 100%;
background-color: #49fb35;
position: absolute;
left:0;
}
.arrow::before {
content: '';
width: 100%;
height: 10px;
background-color: #49fb35;
position: absolute;
left: 0;
}
.arrow::after,
.arrow::before {
box-shadow: 0px 0px 1px 1px black;
}
.down {
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
}
<div class="arrows">
<i class="arrow down"></i>
</div>
I'm trying to make a version of the Muller-Lyer illusion in HTML (no image files, because I want to make the line length variable).
Here's what I have so far; it's got the right elements but isn't working correctly. What's the best approach?
.arrow {
border: solid black;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 40px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.line-container {
display: flex;
width: 100%;
margin: 20px auto;
align-items: center;
}
.line {
flex-grow: 1;
height: 2px;
background: black;
position: relative;
}
.line.arrow-right:after {
position: absolute;
content: '';
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
.line.arrow-left:after {
position: absolute;
content: '';
top: -10px;
left: 0;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid transparent;
}
label {
margin: 0 15px;
}
<i class="arrow right"></i><div class="line-container"><span class="line arrow-left"></span><span class="line arrow-right"></span>
</div><i class="arrow left"></i>
I used your base cde and tried to simplify a bit.
Have a look at this codepen. Is it what you are looking for?
The "weakness" of using rotated borders is that the arrows are longer than the container div, that's the reason why I added some margin.
The best solution is probably to use SVG lines.
.line-container {
margin: 80px;
width: 400px;
height: 100px;
position: relative;
}
.arrow {
position: absolute;
border: solid black;
border-width: 0 8px 8px 0;
height: 100px;
width: 100px;
}
.right.out {
right: 16px;
}
.left.out {
left: 16px;
}
.right.in {
left: -120px;
}
.left.in {
right: -120px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.line {
width: 100%;
border-top: 8px solid black;
position: absolute;
top: 50%;
left: 0;
}
<div class="line-container">
<i class="arrow right in"></i>
<div class="line"></div>
<i class="arrow left in"></i>
</div>
<div class="line-container">
<i class="arrow left out"></i>
<div class="line"></div>
<i class="arrow right out"></i>
</div>
I'm trying to create triangular bootstrap badge with text at center of the triangle.
Code for normal badge: https://jsfiddle.net/wqrry89r/
Code for triangular bootstrap badge: https://jsfiddle.net/wqrry89r/1/
My CSS code is:
.badge-triangle {
left: 10px;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #777;
background-color: #fff;
}
.badge-triangle:after {
left: 10px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #FFF;
left: 57px;
position: absolute;
top: 38px;
content: '';
}
How can I make that bootstrap badge triangular and make text go to center of triangle?
.badge {
position: absolute;
right: 0;
top: 0;
border-top: 90px solid #CC0000;
border-left: 90px solid transparent;
}
.mask-t {
color: #fff;
position: absolute;
width: 100px;
height: 100px;
right: 0px;
top: 0px;
}
.mask-t strong {
display: block;
width:100%;
height:100%;
line-height: 100px;
text-align: center;
-webkit-transform: rotate(45deg) translate(0, -25%);
-moz-transform: rotate(45deg) translate(0, -25%);
-ms-transform: rotate(45deg) translate(0, -25%);
-o-transform: rotate(45deg) translate(0, -25%);
transform: rotate(45deg) translate(0, -25%);
}
<div class="badge">
</div>
<div class="mask-t">
<strong>Sale!</strong>
</div>
Although right answer has already been provided but just want to give another thought.
This is using normal CSS (not bootstrap badge) but modifying actual code only.
Here, I have considered "my-triangle" as main triangle.
HTML changes:
<div class="row">
<div class="container my-triangle">
<span class="badge-triangle"></span>
<span class="new-text">N.T.A</span>
</div>
</div>
CSS changes:
.my-triangle{
position:relative;
top:50px;
left:100px
}
.badge-triangle {
width: 0;
height: 0;
position:absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #777;
}
.badge-triangle:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #fff;
left: -50px;
position: absolute;
top: 30px;
content: '';
}
.new-text{
position:absolute;
top:50px;
left:100px;
transform:translateX(-50%);
}
Please check this fiddle.
https://jsfiddle.net/wqrry89r/3/
I am trying to put a point on the right side of a relative (no defined width) div.
HTML (using Wordpress and Bootstrap)
<div class="col-md-9 col-md-offset-1">
<h2 class="sml-title"><?php the_category(' - '); ?></h2>
...
CSS
.sml-title {
display: inline-block;
padding: 15px;
color: #fff;
background-color: #4ad2dc;
}
.sml-title:after {
right: 0px;
top: 0px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #88b7d5;
border-width: 30px;
margin-top: -30px;
}
the problem I'm running into is that the arrow goes all the way to the right side of the screen. I want it to go right after the sml-title. But I can't set a width on the sml-title because i don't control the content.
Trying to accomplish this
You can achieve the shape as either of the two ways-
.arrow {
border-right: 33px solid transparent;
height: 0;
width: 130px;
border-bottom: 34px solid black;
}
.invert {
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: transform: rotateX(180deg);
;
}
#base {
background: red;
display: inline-block;
height: 134px;
margin-left: 33px;
/* margin-top: 51px; */
position: relative;
width: 70px;
transform: rotate(90deg);
}
#base:before {
border-bottom: 35px solid red;
border-left: 36px solid transparent;
border-right: 34px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -35px;
width: 0;
}
<div class="arrow"></div>
<div class="arrow invert"></div>
<div id="base"></div>
h2{
background: #000;
color: #fff;
float: left;
font-family: Arial, sans-serif;
overflow: hidden;
padding: 20px 50px 20px 20px;
position: relative;
text-align: center;
min-width: 200px;
}
h2:before, h2:after {
content: '';
display: block;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #fff;
position: absolute;
right: -10px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
h2:before {
top: -20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
h2:after {
bottom: -20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<h2 class="sml-title">TITLE</h2>
If you use position: absolute, it will position the element within the nearest parent which is either position: relative or absolute. In your case, .sml-title has neither of those properties, so .sml-title:after is not positioned within .sml-title.
If you want your ::after pseudoelement to be positioned within .sml-title, you'll need to add position: relative or absolute to .sml-title
I'm Trying to get my :before arrow work nicely with my div, but i can't find a way to give the arrow
background-color: transparent
dashed border.
CSS:
position: absolute;
top: 30px;
right: 8px;
display: inline-block;
border-top: 12px dashed transparent;
border-left: 12px dashed #b3b3b3;
border-bottom: 12px dashed transparent;
border-left-color: #b3b3b3;
content: '';
JS FIDDLE
You should use same border-width and rotate the pseudo element.
Add a background to hide the box border where it stands. DEMO
CSS can become for the pseudo :
ul.timeline li.item-timeline:nth-child(even):before {
position: absolute;
top: 37px;
right: 15px;
display: inline-block;
border-top: 1px dashed #b3b3b3;
border-right: 1px dashed #b3b3b3;
width:10px;
height:10px;
transform:rotate(45deg);
background:white;
z-index:1;
content:'';
}
Use prefix wherever it is needed.
Extra infos,
if the buggy dotted radius border in FF bothers you, you can play with an outline-offset to cut into borders.DEMO, for FF only
#-moz-document url-prefix() {
/* a stupid way to fix here the border radius effect when dotted or dashed*/
div.inner-content {
outline:white double 4px;
outline-offset:-5px;
}
}
you can get the idea from this code http://codepen.io/romanstrobel/pen/EgCHi. You can't use the :before though, because of different z-indexes
HTML
<div class="wrap">
<div class="arrow"></div>
<div class="arrow-cover"></div>
<div class="box"></div>
</div>
CSS
.wrap {
margin: 100px auto;
width: 300px;
height: 150px;
position: relative;
}
.arrow {
width: 50px;
height: 50px;
border: 3px dotted gray;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
margin-top: -25px;
left: -25px;
z-index: 10;
border-radius: 10px;
}
.arrow-cover {
top: 50%;
margin-top: -25px;
left: -21px;
width: 50px;
height: 50px;
border: 3px solid transparent;
position: absolute;
background: white;
z-index: 30;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 10px;
}
.box {
width: 300px;
height: 150px;
background: white;
z-index: 20;
position: relative;
border: 3px dotted gray;
background: white;
border-radius: 10px;
}