Как можно реализовать нестандартные фигуры на css [закрыт]

#html #css #html5 #css3

        
             
                
                    
                        
                            Закрыт. Этот вопрос не по теме. Ответы на него в данный
момент не принимаются.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Хотите улучшить этот вопрос? Переформулируйте вопрос,
чтобы он соответствовал тематике «Stack Overflow на русском».
                        
                        Закрыт 4 года назад.
                                                                                
           
                
        
Нашёл такой макет. Как можно реализовать такие необычные углы??? 
    

Ответы

Ответ 1

Приблизительно так

Fiddle



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
form {
    max-width: 300px;
    margin: 25px auto;
    position: relative;
}
form .input-wrap {
    display: inline-block;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 10px 0;
}
form .input-wrap:nth-of-type(1):before, form .input-wrap:nth-of-type(2):before {
    content:'';
    position: absolute;
    right: -40px;
    width: 80px;
    height: 80px;
    border: 2px solid #000;
    background: #fff;
    border-radius: 50%;
}
form .input-wrap:nth-of-type(1):before {
    top: 10px;
}
form .input-wrap:nth-of-type(2):before {
    bottom: 10px;
}
input {
    display: block;
    width: 100%;
    border: none;
    outline: none;
    box-sizing: border-box;
}
input[type="text"] {
    height: 45px;
    border: 2px solid #000;
    padding: 5px 15px;
}
input[type="submit"] {
    position: absolute;
    top: 50%;
    right: -25px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    background: #f00;
    border-radius: 50%;
}