Question

我想在此图片中绘制一个形状并在其中键入文字。我怎样才能在图片中画出这样的东西呢？我无法在左侧div或右侧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/

在图片中画出这样的形状

1 个答案: