0

I've to create something you see in attached image

enter image description here

right now i am using this as background image

background-image: url("corner.png");
background-size: cover;

and then added text but i know there does exist a css solution for creating this border for this so if someone please help me with this i tried to find but i did not find proper solution

Harry
  • 87,580
  • 25
  • 202
  • 214
Sikander
  • 2,799
  • 12
  • 48
  • 100

3 Answers3

3

You can also generate it from the below link and use it.

http://apps.eky.hk/css-triangle-generator/

.arrow {
  width: 250px;
  height: 60px;
  position: relative;
  background: #333;
}
.arrow:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #333;
  position: absolute;
  bottom: -15px;
  left:25px;
}
<div class="arrow"></div>
kushal kant
  • 440
  • 3
  • 9
  • 2
    Answers should not just be links to an external site and they should be able to stand on their own (just in-case the linked site goes down). Please add atleast the generated code to your answer. – Harry Nov 02 '15 at 06:09
  • ok Harry Next time i will take care of that thing :) – kushal kant Nov 02 '15 at 06:45
  • That's fine but unless you update this answer it could be deleted by the reviewers (community) and you'd stand to lose any rep gained because of it. So, better take care of it this time itself :) – Harry Nov 02 '15 at 06:46
  • You have 2 up votes for the answer but also been flagged as low quality post. It is better you update the answer with relevant code for avoiding deletion. – m4n0 Nov 02 '15 at 10:13
1

.arrow-down {
  width: 200px;
  height: 50px;
  position: relative;
  background: red;
}
.arrow-down:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
  position: absolute;
  bottom: -19px;
}
<div class='arrow-down'>fgdfgdfgfd</div>

This will help you. it will create arrows using css.

https://css-tricks.com/snippets/css/css-triangle/

Mitul
  • 3,431
  • 2
  • 22
  • 35
  • An appreciable answer! Please add your comments as well if 'This answer in not useful'. – Kunj Nov 02 '15 at 06:29
  • @KunJ: I wasn't the one to downvote but the initial version of this answer was a link only version which might have prompted the downvote (and I can't justify why the other link only answer didn't get any too). – Harry Nov 02 '15 at 06:30
  • Yes may be that's why i have added code for more detail, – Mitul Nov 02 '15 at 06:31
  • And if that's the reason then why @kushalkant have up voted :( – Mitul Nov 02 '15 at 06:32
  • 1
    @Harry , thanks for reply and contribution! Right said. Down voter should alter his/her vote if mitul improved his answer :) – Kunj Nov 02 '15 at 06:45
  • @all may be stackoverflow send notification to down voter if user change the ans so he/she review the new ans and change the vote. right now if some one give down vote and leave the page then he can not see if the user change the ans. – Mitul Nov 02 '15 at 06:48
1

Check this fiddle Hope you refer something like this.

a.tooltips {
  position: relative;
  display: inline;
}
a.tooltips span {
  position: absolute;
  width:140px;
  color: #FFFFFF;
  background: #000000;
  height: 30px;
  line-height: 30px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}
Sameera Thilakasiri
  • 9,452
  • 10
  • 51
  • 86