简体   繁体   中英

How to get angled corner like this in CSS, it's not round?

How to get angled corner like this in CSS, it's not round?

I tried with for left side (Example) but it's not giving the same effect

border-bottom-left-radius: 12px;
    border-top-left-radius: 3px;

在此处输入图像描述

This is a perfect page for your question - it explains in detail (with photos too) how to get different curves using different CSS, including one like your question's pic:

http://www.css3.info/preview/rounded-border/

The one that looks most like yours (imo) is:

#Example_C {
    height: 65px;
    width:160px;
    -moz-border-radius-bottomright: 25px 50px;
    border-bottom-right-radius: 25px 50px;
}

Something like this

border-bottom-left-radius:20px 60px;

by looking at http://www.css3.info/preview/rounded-border/ I would think it would be

border-bottom-left-radius: 50px 100px;

border-bottom-right-radius: 50px 100px;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM