How to Make chat arrow appear image so the image will be visible in the background of the arrow. And image can have border-radius round.
Just like below image.
Thanks in advance.
.userMsgImage {
position: relative;
min-height: 40px;
margin-left: 20px;
}
.userMsgImage a,
.userMsgImage img {
border-radius: 4px;
display: block;
max-width: 200px;
}
.userMsgImage a img {
margin-left: 0;
}
.userMsgImage::after,
.userMsgImage::before {
left: 0px;
content: "";
width: 0px;
position: absolute;
border-color: transparent transparent transparent rgb(255, 255, 255);
border-style: solid;
}
.userMsgImage::before {
top: 0px;
height: 30px;
border-width: 0px 0px 40px 40px;
}
.userMsgImage::after {
top: 12px;
height: calc(100% - 12px);
border-width: 40px 0px 0px 40px;
}
<div class="userMsgImage">
<a href="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" target="_blank">
<img src="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" alt="loading" width="200px">
</a>
</div>
See below code snippet - I had added a couple of absolutely positioned <span> elements with borders and border-radius to give the effect of a corner on the left top and bottom.
.userMsgImage {
position: relative;
min-height: 40px;
margin-left: 20px;
}
.userMsgImage a,
.userMsgImage img {
border-radius: 4px;
display: block;
max-width: 200px;
}
.userMsgImage a img {
margin-left: 0;
}
.userMsgImage::after,
.userMsgImage::before {
left: 0px;
content: "";
width: 0px;
position: absolute;
border-color: transparent transparent transparent rgb(255, 255, 255);
border-style: solid;
}
.userMsgImage::before {
top: 0px;
height: 30px;
border-width: 0px 0px 40px 40px;
}
.userMsgImage::after {
top: 12px;
height: calc(100% - 12px);
border-width: 40px 0px 0px 40px;
}
.corner-left-top {
position: absolute;
left: 36px;
top: -4px;
border-top-left-radius: 8px;
border-left: 4px solid #fff;
border-top: 4px solid #fff;
width: 20px;
height: 20px
}
.corner-left-bot {
position: absolute;
left: 36px;
bottom: -4px;
border-bottom-left-radius: 8px;
border-left: 4px solid #fff;
border-bottom: 4px solid #fff;
width: 20px;
height: 20px
}
<div class="userMsgImage">
<a href="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" target="_blank">
<img src="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" alt="loading" width="200px">
</a>
<span class="corner-left-top"></span>
<span class="corner-left-bot"></span>
</div>
Related
I made a curved tab list and everything looks good, but the problem is in some resolutions it break position about one pixel, I really want know why this happen technically? and how can I avoid this?
#tabs ul li {
display: inline-block;
padding: 0 10px 0 10px;
border: 1px solid gray;
border-bottom: none;
border-radius: 10px 10px 0 0;
height: 40px;
position: relative;
line-height: 40px;
top: 5px;
margin: 0 -5px 0 0;
min-width: 100px;
}
.active {
border: 1px solid #0061ff !important;
height: 50px !important;
line-height: 50px !important;
border-bottom: none !important;
top: 0px !important;
}
#tabcontent {
width: 200px;
height: 200px;
}
#tab {
border: 1px solid #0061ff;
margin-top: 75px;
border-radius: 10px;
}
#tabs {
margin-top: -68px;
}
.invRadTab1 {
width: 35px;
height: 10px;
background: white;
position: absolute;
bottom: -3px;
left: -33px;
z-index: 9999999;
overflow: hidden;
}
.invRadTab2 {
width: 35px;
height: 10px;
background: white;
position: absolute;
bottom: -3px;
right: -33px;
z-index: 9999999;
overflow: hidden;
}
.invRadTab1 span {
width: 60px;
height: 20px;
background: #fff;
position: absolute;
bottom: 2px;
right: 2px;
border: 1px solid #0061ff;
border-radius: 0 0 10px 0;
border-top: none;
border-left: none;
position: absolute;
}
.invRadTab2 span {
width: 60px;
height: 20px;
background: #fff;
position: absolute;
bottom: 2px;
left: 2px;
border: 1px solid #0061ff;
border-radius: 0 10px 0 10px;
border-top: none;
border-right: none;
position: absolute;
}
li.active::after {
content: "";
display: block;
width: 100%;
height: 2px;
background: white;
position: absolute;
bottom: -2px;
left: 0;
}
<div id="tab">
<div id="tabs">
<ul>
<li><a>Tab 2</a></li>
<li class="active"><a>Tab 1</a><span class="invRadTab1"><span></span></span><span class="invRadTab2"><span></span></span>
</li>
<li><a>Tab 3</a></li>
<li><a>Tab 4</a></li>
</ul>
</div>
<div id="tabcontent">
some content
</div>
</div>
If you want to see this problem, you should run this snippet in full page and zoom in or zoom out (for me on 125% and 90%), my screen is 1920 and another machine is 1366, I don't see any problem in 1920 resolution, but see this break in 1366 resolution also in another screens. how can I fix this issue?
I have an absolutely positioned CSS banner that has a responsive width and height based on viewport size. The element is centered on desktop and tablet devices, but not on mobile (when the banner's width starts to shrink).
I can't use the classic margin: 0 auto; trick because the margins have to be set to a fixed value for the banner to work.
The code is below:
HTML:
<h1 class="banner">A Simple CSS Banner</h1>
CSS:
#import url(https://fonts.googleapis.com/css?family=Rye);
body
{ background: #eee; }
.banner {
position: absolute;
left: 50%;
display: block;
margin: 100px -200px;
width: 400px;
max-width: calc(100% - 150px);
height: 60px;
border: 1px solid #8a1;
font: normal 30px/60px 'Rye';
text-align: center;
color: #451;
background: #9b2;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0,0,0,.15) inset,
0 6px 10px rgba(0,0,0,.15);
}
.banner::before,
.banner::after {
content: '';
position: absolute;
z-index: -1;
left: -70px;
top: 24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #9b2;
border-right: 20px solid #791;
border-bottom-color: #94b81e;
border-left-color: transparent;
transform: rotate(-5deg);
}
.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #791;
border-right: 30px solid transparent;
transform: rotate(5deg);
}
#media (max-width: 475px) {
.banner {
height: 90px;
line-height: 45px;
}
.banner::before,
.banner::after {
border-width: 45px;
border-right-width: 30px;
}
.banner::after {
border-left-width: 30px;
border-right-width: 45px;
}
}
Link to working codepen: https://codepen.io/Adam0410/pen/QZOKdV
Thanks for the help!
Check if this helps you.
#import url(https://fonts.googleapis.com/css?family=Rye);
body {
background: #eee;
}
.banner {
position: absolute;
left: 50%;
transform: translate(-50%);
display: block;
margin: 100px 0;
width: 400px;
max-width: calc(100% - 150px);
min-height: 60px;
}
.banner span {
display: block;
position: relative;
z-index: 1;
border: 1px solid #8a1;
font: normal 30px/60px "Rye";
text-align: center;
color: #451;
background: #9b2;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) inset, 0 6px 10px rgba(0, 0, 0, 0.15);
}
.banner::before,
.banner::after {
content: "";
position: absolute;
z-index: -1;
left: -70px;
bottom: -24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #9b2;
border-right: 20px solid #791;
border-bottom-color: #94b81e;
border-left-color: transparent;
transform: rotate(-5deg);
}
.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #791;
border-right: 30px solid transparent;
transform: rotate(5deg);
}
#media (max-width: 475px) {
.banner {
min-height: 90px;
line-height: 45px;
}
.banner::before,
.banner::after {
border-width: 45px;
border-right-width: 30px;
}
.banner::after {
border-left-width: 30px;
border-right-width: 45px;
}
}
<h1 class="banner"><span>A Simple CSS Banner</span></h1>
You can simply use Media queries and adapt Width and margin.
something like:
media (max-width: 475px) {
.banner{
width: 200px;
margin:100px -100px;
}
}
This way you keep the top and bottom margin:
left: 0; right: 0;
margin: 100px auto;
If you want to center an absolute or fixed element you should :
position: absolute;
left: 0%;
right:0%;
margin: 0 auto;
I need an arrow on the right side of the div but this one is not working.
Here is the fiddle:
https://jsfiddle.net/azb5m3r2/2/
The arrow correctly appears on the left side of the div, but I want it to appear on the right side (opposite side).
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
/* .callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
*/
.callout.left:after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
<div class="callout left">test</div>
This works on the left hand side
<div class="callout right">test</div>
Instead of this:
.callout.left::after {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
Use this:
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
And, optionally, for a perfectly centered arrow, use this:
.callout.left::before {
right: -20px;
top: 50%;
transform: translateY(-50%);
border-left: 10px solid #444;
}
revised fiddle
For an explanation of the centering technique, see this post: Element will not stay centered, especially when re-sizing screen
The callout.left must be ::before , not ::after or :after, Same as you give the .callout::before style.
The code should like this
.callout.left::before {
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
I think you may try something like this:
.callout {
position: relative;
top: 0;
left: 0;
display: block;
padding: 10px;
}
.callout.right {
margin-left: 10px;
}
.callout.right::before {
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #a8c3e5;
content: '';
}
.callout.right::after {
position: absolute;
top: 50%;
left: 2px;
width: 0;
height: 0;
margin-top: -10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #f9f9f9;
content: '';
}
.callout-inner {
padding: 2px;
width: 240px;
overflow: hidden;
background: black;
background: #a8c3e5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.callout-content {
padding: 14px;
margin: 0;
background-color: #f9f9f9;
color: #39569A;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
<div class="callout right">
<div class="callout-inner">
<div class="callout-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
#right {
background-color: #333;
height: 60px;
position: relative;
width: 150px;
border-radius:5px;
float:right;
font-family:Helvetica;
color:#FFF;
text-align:center;
line-height:55px;
}
#right:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
margin-left: -10px;
}
****
<div id="right">test</div>
https://jsfiddle.net/razia/peeq2aam/
I've see a lot of threads remotely related that basically suggest CSS triangles in the ::after or ::before pseudos, but none have really panned out. I'm throwing this out to see if anyone has any ideas.
I'm looking to create a div with a pointed or pitched top that still maintains a uniform border and box-shadow with the rest of the div.
See link for an image of what I'm trying to create:
If you dont want to use a image you could do something like this. But working with an image is lot easier in this case.
body {
background-color: #CCC;
}
.wrapper {
}
.outer {
width: 0;
height: 0;
border-style: solid;
border-width: 0 205px 32px 205px;
border-color: transparent transparent #ffffff transparent;
position: absolute;
}
.inner {
width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 32px 200px;
border-color: transparent transparent #ea2225 transparent;
margin-left: -200px;
margin-top: 5px;
position: absolute;
}
.fix {
background-color: #FFF;
height: 10px;
width: 410px;
position: absolute;
margin-top: 32px;
}
.red {
width: 396px;
height: 300px;
background-color: #ea2225;
margin-top: 37px;
position: absolute;
border-left: 7px solid #FFF;
border-right: 7px solid #FFF;
border-bottom: 6px solid #FFF;
-webkit-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
-moz-box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
box-shadow: 3px 5px 5px 0px rgba(48,48,48,1);
}
<div class="wrapper">
<div class="fix"></div>
<div class="outer">
<div class="inner">
</div>
</div>
</div>
<div class="red"></div>
See http://jsfiddle.net/0csqog8s/
this should get you started:
Update
This is an updated fiddle which is much better presented.
.first {
display: inline-block;
width: 3em;
height: 3em
}
.second {
position: relative;
display: inline-block;
width: 3em;
height: 3em
}
.third {
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border: 1.5em solid transparent;
margin-top: -1em;
border-bottom: 1em solid #007BFF;
left: 0em;
top: 0em
}
.forth {
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border: 1.5em solid #007BFF;
border-bottom: 1.5em solid #007BFF;
left: 0em;
top: 1.5em
}
<span class="first"><span class="second"><i class="third"></i><i class="forth"></i></span></span>
I want to create a ribbon effect like on this image (the red part of image):
When I try to create an arrow effect with borders, the shape of object is completely destroyed:
HTML code:
Kategorija
CSS code so far (without trying to create the arrow):
.mali_oglas_kategorija {
position: relative;
display: inline-block;
font-weight: bold;
width: 100px;
padding: 6px 20px 6px 40px;
margin: 10px 10px 10px -18px;
color: #e5e5e5 !important;
background-color: #760000;
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
box-shadow: 0px 2px 4px rgba(0,0,0,.5);}
.mali_oglas_kategorija:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #470000 #470000 transparent transparent;
}
Any idea how can I create this?
Made a fiddle here. Couldn't solve it without a b tag though. I used b because it is so small
HTML
Kategorija<b></b>
CSS
.mali_oglas_kategorija {
position: relative;
display: inline-block;
font-weight: bold;
width: 100px;
padding: 6px 20px 6px 40px;
margin: 10px 10px 10px -18px;
color: #e5e5e5 !important;
background-color: #760000;
-webkit-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 3px 2px 4px rgba(0,0,0,.5);
box-shadow: 3px 2px 4px rgba(0,0,0,.5);}
.mali_oglas_kategorija:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #470000 #470000 transparent transparent;
}
.mali_oglas_kategorija:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -10px;
top: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #760000 transparent transparent #760000 ;
}
.mali_oglas_kategorija b {
position: absolute;
width: 0;
height: 0;
right: -10px;
bottom: 0;
border-width: 10px 5px;
border-style: solid;
border-color: transparent transparent #760000 #760000 ;
}
body { padding: 50px;}
you could also use a skewed element if this was required for hit-testing as well.
Something like:
.rib {
margin-left: 20px;
height: 40px;
width: 200px;
position: relative;
background: gray;
color: white;
line-height: 40px;
text-align: center;
}
.rib:before,
.rib:after {
content: "";
position: absolute;
right: -10px;
top: 0;
height: 50%;
width: 40px;
background: inherit;
}
.rib:before {
transform: skewX(-45deg);
}
.rib:after {
transform: skewX(45deg);
top: 50%;
}
.shad {
position: absolute;
height: 40px;
width: 20px;
top: 0%;
left: 0;
background: dimgray;
transform-origin: top left;
transform: skewY(45deg);
z-index: -1;
box-shadow:inset 0 0 10px black;
}
<div class="rib">123
<div class="shad">
</div>
</div>