如何用输入和按钮创建三角形的表单？

现在我有一个像上面一样的形式，但左侧和右侧没有三角形。我已经将这个特性加入到了我的表单中，但是它转变了一些静态而非自适应的（我选择的大小仅仅通过像素来考虑我的浏览器）。如果您提供一些链接，我会很高兴。这个三角形有相应的三角形阴影，所以我不能使用：after和：before。它最重要的

来源

2016-05-08 Marik Zuckor

是，与箱阴影 –

也许你可以让该元素的形状的副本，并把它放在下面元素来作出阴影效果，如果你不能使用伪选择器 –

@MarikZuckor它是你的目的？ – Mohammad

另一种方法是使用CSS-变换可以创建三角形。主要想法在Elongated hexagon shaped button using only one element中描述。

您可以直接在.rhombus：之前和之后添加box-shadow（但是我注意到Mozilla中存在一些问题），或者只是使用offset和这些伪元素的副本创建另一个包装。

form { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    margin: 0; 
 
    padding: 30px 20px; 
 
    border: none; 
 
    font-family: sans-serif; 
 
} 
 
form .header { 
 
    flex-basis: 100%; 
 
    margin: -10px 0 10px; 
 
    text-align: center; 
 
    color: white; 
 
} 
 
form input, 
 
form button { 
 
    flex-grow: 1; 
 
    height: 30px; 
 
    margin: 0 5px; 
 
    padding: 0 5px; 
 
    box-sizing: border-box; 
 
} 
 
form button[type="submit"] { 
 
    background-color: #FFD900; 
 
} 
 
.rhombus { 
 
    position: relative; 
 
    -webkit-perspective: 800px; 
 
    perspective: 800px; 
 
} 
 
.rhombus:before, 
 
.rhombus:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    height: 50%; 
 
    width: 100%; 
 
    background-color: #1E9BAF; 
 
    z-index: -1; 
 
} 
 
.rhombus:before { 
 
    top: 0; 
 
    -webkit-transform: rotateX(30deg); 
 
    -webkit-transform-origin: center bottom; 
 
    -ms-transform: rotateX(30deg); 
 
    -ms-transform-origin: center bottom; 
 
    transform: rotateX(30deg); 
 
    transform-origin: center bottom; 
 
    /*box-shadow: 3px 5px #DDD;*/ 
 
} 
 
.rhombus:after { 
 
    bottom: 0; 
 
    -webkit-transform: rotateX(-30deg); 
 
    -webkit-transform-origin: center top; 
 
    -ms-transform: rotateX(-30deg); 
 
    -ms-transform-origin: center top; 
 
    transform: rotateX(-30deg); 
 
    transform-origin: center top; 
 
    /*box-shadow: 5px 5px #DDD;*/ 
 
}

<form class="rhombus"> 
 
<div class="header">ОСТАВИТЬ ЗАЯВКУ</div> 
 
<input name="name" placeholder="Ваше имя"/> 
 
<input name="phone" placeholder="Ваш номер телефона"/> 
 
<button type="submit">ОТПРАВИТЬ</button> 
 
</form>

来源

2016-05-08 12:02:53

Спасибозаответ，тольковотнеоченьононастраиваемое，напримерпридвойном框阴影0 0 0 2px的，0 0 0 6像素，которыйнужен，оноломаетверстку，хотяитакисякпробовал，безтолку。 можнокак-тобез转换обойтисьздесь？илитолькотак？ –

Еслинужнадвойнаяполосапопериметру，томожнодобавитьсмещениевверхивниз（атакжевправоивлеводлякомпенсацииискаженияотповорота）。 Вотпример：https://jsfiddle.net/u88qb4wh/2/Какдобитьсяэтогобезтрансформацииянепридумал。 Можетбыть，что-томожносделатьградиентами，какпредлагалосьвдругомответе。 –

您使用CSS边框这样的例子

.form { 
 
    width: 400px; 
 
    height: 80px; 
 
    margin: 0px auto; 
 
    background: #1E9BAF; 
 
    position: relative; 
 
    box-shadow: -7px 15px 0px -5px rgba(0, 0, 0, 0.3); 
 
} 
 

 
.triangle, 
 
.triangle > div { 
 
    width: 0px; 
 
    height: 0px; 
 
    position: absolute; 
 
    border: 40px solid transparent; 
 
} 
 

 
.leftTriangle {  
 
    left: -55px; 
 
    border-right: 15px solid #1E9BAF; 
 
} 
 

 
.leftTriangle > div { 
 
    left: -42px; 
 
    top: -30px; 
 
    z-index: -1; 
 
    border-right: 15px solid rgba(0, 0, 0, 0.3); 
 
} 
 

 
.rightTriangle { 
 
    right: -55px; 
 
    border-left: 15px solid #1E9BAF; 
 
} 
 

 
.rightTriangle > div { 
 
    right: -28px; 
 
    top: -30px; 
 
    z-index: -1; 
 
    border-left: 15px solid rgba(0, 0, 0, 0.3); 
 
}

<div class="form"> 
 
    <div class="triangle leftTriangle"> 
 
     <div></div> 
 
    </div> 
 
    <div class="triangle rightTriangle"> 
 
     <div></div> 
 
    </div> 
 
</div>

来源

2016-05-08 08:59:12 Mohammad

类似的回答您之前qusetion :)。 4个梯度+ background-size也可以在这里做的工作：

form { 
 
    font-size:2em; 
 
    background: 
 
    linear-gradient(-250deg, transparent 1em, #1E9BAF 1.01em) top left no-repeat, 
 
    linear-gradient(70deg, transparent 1em, #1E9BAF 1.01em) bottom left no-repeat, 
 
    linear-gradient(250deg, transparent 1em, #1E9BAF 1.01em) top right no-repeat, 
 
    linear-gradient(-70deg, transparent 1em, #1E9BAF 1.01em) bottom right no-repeat; 
 
    background-size: 60% 50.3%; 
 
    box-shadow:0 1.25em 15px -1.25em ; 
 
    background-size: 60% 50%; 
 
    margin: 2em; 
 
    padding:0.5em; 
 
    text-align: center 
 
} 
 
label{display:block;color:white } 
 
[type] {background:linear-gradient(to top, #ffab00, #fff800);}

<form> 
 
    <label>texting</label> 
 
    <input placeholder=" Name"/> <input placeholder="☎ phone"/> <input type="submit" value="submit"/> 
 
</form>

updated pen

来源

2016-05-08 13:20:00

如何用输入和按钮创建三角形的表单？

回答

相关问题