CODEWITHSUNDEEP
htmlcsscss-shapes
totothegreat
totothegreat

Reputation: 1643

div with right arrow

I have this div:

Div with arrow on the right

I need css that do exacly that, the div and the arrow to the right like that. Alos, i need a random text (length is changing, and we are talking responsive) in it and i want the text always to be in the middle of things... what is the best way to do so?

Upvotes: 2

Views: 3228

Answers (4)

Dmitriy
Dmitriy

Reputation: 4503

Example 1

.block {
    background: green;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
    max-width: 200px;
    margin: 0 auto;
}
.block:after {
    content: ''; 
    position: absolute;  right: -20px; top: 50%;
    border: 10px solid transparent;	
    border-left: 10px solid green; 
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
        transform: translate(0,-50%);   
  }
<div class="block">
   Block
</div>

Example 2

.block {
    background: green;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
    max-width: 200px;
    margin: 0 auto;
}
.block:after{
    content: '';
    position: absolute;  right: -10px; top: 50%;
    background: green;    
    width: 20px; height: 20px;
    margin-top: -10px;    
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg);
}
<div class="block">
   Block
</div>

Upvotes: 3

JHEUNG
JHEUNG

Reputation: 166

Here's a great generator to get you started and then you can customize it a little more to get your desired result

http://cssarrowplease.com/

To get something similar to what you showed, try

.arrow_box {
  position: relative;
  background: #3abc3d;
  min-height: 80px;
  border-radius: 10px;
  padding: 20px;
}
.arrow_box:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(58, 188, 61, 0);
  border-left-color: #3abc3d;
  border-width: 20px;
  margin-top: -20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-5 col-sm-4 col-md-4 col-lg-2">
  <div class="arrow_box">
    Message for everything
  </div>

</div>

And on your arrow box, using bootstrap or whatever grid system you are using, attach the sizing for responsiveness.

Upvotes: 5

Karthi Keyan
Karthi Keyan

Reputation: 804

Please try this

.box {
    width: 200px; 
    padding: 10px;
    background: green;
    border-radius: 5px;
    position: relative;
}
.box p {
    margin: 0;
    color: #fff;
}
.box::after {
    position: absolute;
    content: "";
    border-style: solid;
    border-width: 20px;
    border-color: transparent transparent transparent green;
    left: 100%;
    top: 50%;
    margin-top: -20px;
}
<div class="box">
    <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in fermentum risus. Donec malesuada, risus id vulputate varius, diam enim elementum sem.</p>
</div>

Upvotes: 0

Dimag Kharab
Dimag Kharab

Reputation: 4519

Something like this,

Reference

<style>

    .arrow-right {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;

    border-left: 60px solid green;
}
</style>

<div class="arrow-right"></div>

Upvotes: 1

Related Questions