このような図形を図の中に描きます。

Question

この図のような形を描き、そこにテキストを入力したいと思います。このようなものをどのように描くことができますか？
左のdivまたはright divにテキストを入力することはできません。ここで

私のHTMLです：

<div id="topline"></div> 
    <div id="main"> 
      <div id="left"></div> 
      <div class="leftin"></div> 
      <div class="midd"></div> 
      <div class="rightin"></div> 
      <div id="right"></div> 
    </div> 

そして、これは私のCSSです：

#main{ 
     width: 615px; 
     margin: 0 auto; 
    } 
/***************************************************************************/ 
    #topline{ 
     width: 615px; 
     height: 1px; 
     background: -moz-linear-gradient(left, red , green); 
     background: -webkit-linear-gradient(left, red , green); 
     background: -o-linear-gradient(left, red , green); 
     background: -ms-linear-gradient(left, red , green); 
     margin: 0 auto; 
    } 
/**************************************************************************/ 
     #left{ 
     position: relative; 
     display: inline-block; 
     width: 301px; 
     height: 20px; 
     border-bottom: 1px solid green; 
     margin: 0px 0px 0px 0px; 
     z-index: 1000; 
    } 
/************************************************************************/ 
    .leftin { 
     display: inline-block; 
     border-right: 1px solid green; 
     width: 20px; 
     height: 21px; 
     margin: 0px 0px 0px -15px; 
     -ms-transform:skewX(-45deg); 
     -moz-transform:skewX(-45deg); 
     -o-transform:skewX(-45deg); 
     -webkit-transform:skewX(-45deg); 
     z-index: 1000; 
    } 
/******************************************************************************/ 
    .midd { 
     display: inline-block; 
     width: 2px; 
     height: 21px; 
     background-color: #ccc; 
     margin: 0px 0px 0px 0px; 
     -ms-transform:skewX(-45deg); 
     -moz-transform:skewX(-45deg); 
     -o-transform:skewX(-45deg); 
     -webkit-transform:skewX(-45deg); 
     z-index: 1000; 
    } 
/************************************************************************************/ 
    #right{ 
     display: inline-block; 
     width: 302px; 
     height: 20px; 
     border-bottom: 1px solid #FF0000; 
     background: -moz-linear-gradient(left, #ff3333, #fff 30% ); 
     background: -webkit-linear-gradient(left,#ff3333, #fff 30%); 
     background: -o-linear-gradient(left,#ff3333, #fff 30%); 
     background: -ms-linear-gradient(left,#ff3333, #fff 30%); 
     z-index: -1; 
     margin: 0px 0px 0px -14px; 
     } 
/**********************************************************************/ 
    .rightin { 
     display: inline-block; 
     background-color: #fff; 
     width: 20px; 
     height: 21px; 
     margin: 0px 0px 0px -20px; 
     -ms-transform:skewX(-45deg); 
     -moz-transform:skewX(-45deg); 
     -o-transform:skewX(-45deg); 
     -webkit-transform:skewX(-45deg); 
     z-index: 0; 
    } 

fiddle

Answer 1

あなたは、このようにしたいですか？

#main{ 
     width: 630px; 
     margin: 0 auto; 
    } 
     #left{ 
     position: relative; 
     display: inline-block; 
     width: 301px; 
     height: 20px; 
     border-bottom: 1px solid green; 
     margin: 0px 0px 0px 0px; 
     z-index: 1000; 
     font-size:20px; padding-left:10px; 
    } 

http://jsfiddle.net/ahe128/7t3ardL7/1/