做一個輸入從右凹和從左凹凸起

Question

我怎樣才能實現這種效果的文字輸入與CSS？

Answer 1

你可以用input和使用pseudo元素，使其curved爲弧形陰影您可以使用insetbox-shadow和input你可以添加padding

* { 
 
    box-sizing: border-box; 
 
} 
 
div { 
 
    display: inline-block; 
 
    position: relative; 
 
    height: 40px; 
 
} 
 
div:after { 
 
    content: ''; 
 
    width: 40px; 
 
    height: 100%; 
 
    left: 92%; 
 
    top: 0; 
 
    border-radius: 50%; 
 
    background: white; 
 
    position: absolute; 
 
    box-shadow: inset 2px 0px 0px 0px rgb(184, 170, 170); 
 
} 
 
div input { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 0; 
 
    display: inline-block; 
 
    border-radius: 30px 0px 0px 30px; 
 
    background: #343434; 
 
    padding: 10px; 
 
    color: white; 
 
    font-size: 20px; 
 
    box-shadow: 2px 1px 3px 0px rgb(184, 170, 170); 
 
}

<div> 
 
    <input type="text" /> 
 
</div>