Geek asks and answers

CSS triangle with dynamic height

I wonder if anyone can help with the css issue I am facing .. see this jsbin: http://jsbin.com/uviyat/2/edit

Please note: “A longer wording example is how can I make the triangle arrow indicator scale vertically to dynamically fill the selected height of the blue area? (The triangle is generated in the last css rule ..)

I'm stumped! Does anyone have any ideas?

Thanks in advance.

EDIT - since Zoltans is responding, I had jQuery: http://jsbin.com/uviyat/12/edit Not sure if this is the best way to do this? Where does the value "16" come from?

+2
source share
2 answers

. , , , - http://jsbin.com/uviyat/3/edit

<li class="selected tall"><a href="#">Longer  Wording Example</a></li>

<style>
.filters .selected.tall:after {
  margin-top: -36px;
  border-width: 20px 0 20px 7px;
}
</style>

...

UPDATE

CSS3 background-size: cover :after. . DEMO

li {
    width: 100px;
    border: 1px solid #eee;
    margin: 3px;
    position: relative;
}

li:after {
    content: ' ';
    display: block;
    position: absolute;
    right: -20px;
    width: 20px;
    top: 0;
    bottom: 0;
    background: url(http://lorempixel.com/20/20) no-repeat;
    background-size: cover;
}
+5

http://jsbin.com/hefavo/1/edit

, , - . . , ( ), , .

, , . , , "margin-left" 15px.

: li , , css, 500 x 1000. . ( ... . ) , , .

.filters .selected:before {
  position:absolute;
  height: 0;
  top: 50%;
  // transform:scaleY(-1);
  max-width: 300%;
  border-right: 500px solid #3aa5de;
  border-bottom: 1000px solid transparent;
  content: "";
  left: 50%;
  border-radius:0;
  margin-left: 10px;
  transform: scaleX(-1) translateX(100%);
}

.filters .selected:after {
  position:absolute;
  height: 0;
  top: 50%;
  transform:scaleY(-1) scaleX(-1) translateY(100%)     translateX(100%);
  max-width: 300%;
  border-radius:0;
  border-right: 500px solid #3aa5de;
  border-bottom: 1000px solid transparent;
  content: "";
  left: 50%;
  margin-left: 10px;
}

li , . "100%", li 200%, 50% ( ) 50% .

.filters li{
  overflow:hidden;
  width: 200%;
  position:relative;
}
.filters li a{
  width:50%;
  position:relative;
  z-index: 1;
}

edit: css

+1

More articles:


All Articles