slope.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg class="transition_block" viewbox="0 0 1 1" preserveAspectRatio="none"> 
    <rect x="0" y="0" width="1" height="1" class="fill_left" style="stroke:none"/>
</svg>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg4652"
   class="transition_slope"
   version="1.1"
   viewBox="0 0 340 70"
   height="70"
   width="340"
>
  <defs
     id="defs4646" />
  <metadata
     id="metadata4649">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <path
     id="left_slope"
     class="fill_left"
     d="m 0,0 v 70 h 230 c 10,0 20,0 30,-10 L 310,10 C 320,0 340,0 340,0 Z"
     style="stroke:none;" 
  />
  <path
     id="inner_slope"
     class="fill_slider"
     d="M 80,30 C 75,30 60,30 50,40 L 30,60 C 20,70 10,70 0,70 h 230 c 10,0 20,0 30,-10 l 30,-30 z"
     style="stroke:none;" 
  />
  <path
     id="right_slope" 
     class="fill_right"
     d="M 340,70 H 230 c 10,0 20,0 30,-10 L 310,10 C 320,0 340,0 340,0 Z"
     style="stroke:none"
  />
</svg>

<svg class="transition_block" viewbox="0 0 1 1" preserveAspectRatio="none"> 
    <rect x="0" y="0" width="1" height="1" class="fill_right" style="stroke:none"/>
</svg>