Triangle with One Rounded Corner

<svg viewbox="0 0 50 50" height="56px">  <path d="M1 50 V10 Q1 1 10 1 H50z" fill="#ff4369" /></svg>

How to make 3-corner-rounded triangle in CSS

My best attempt: http://dabblet.com/gist/4592062

Pixel perfection at any size, uses simpler math than Ana's original solution, and is more intuitive in my opinion :)

.triangle { position: relative; background-color: orange; text-align: left;}.triangle:before,.triangle:after { content: ''; position: absolute; background-color: inherit;}.triangle,.triangle:before,.triangle:after { width:  10em; height: 10em; border-top-right-radius: 30%;}
.triangle { transform: rotate(-60deg) skewX(-30deg) scale(1,.866);}.triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);}.triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);}

<div class="triangle"></div>

triangle with rounded corners

rotate + overflow would do (with an extra element or a pseudo):

.tr {  height:40px;  width:40px;  overflow:hidden;  transform:scale(1,1.2);/* increase visual height */  }.tr div {/* could be a pseudo */  width:70%;  height:70%;  float:right;  background:#C20009;  transform:rotate(-45deg);  box-shadow: 0 0 1px, inset 0 1px 1px , inset 5px -5px 5px rgba(0,0,0,0.3);  transform-origin: top right;  border-radius : 8px 0 0 0 /* and the rounded corner to finish */  }

<div class="tr">  <div></div></div>

Create triangle with rounded corners at top of bottomsheet

You can achieve this using a MaterialShapeDrawable with a custom ShapeAppearanceModel.

1. Get the latest Material Design Library and add it into your app grandle dependencies (implementation 'com.google.android.material:material:1.4.0')

2. In your Bottom Sheet xml file define an empty View (eg: a Relative Layout) which will be the top of your Bottom Sheet. A sample will be like below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/bottomSheetParentRL"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white">

    <RelativeLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"/>
    
</RelativeLayout>

3. Finally create your custom ShapeAppearanceModel with Rounded Corners only to the Top Left Side and use a custom EdgeTreatment for the TopEdge to draw the above triangle shape using the ShapePath.quadToPoint method like in the below example:

JAVA:

//get the Relative Layout or any other View
RelativeLayout relativeLayout = findViewById(R.id.relativeLayout);

//set the top left corner radius and bottom Y margin in pixels
int topLeftCornerRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
int bottomYMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 25, getResources().getDisplayMetrics());

//create a new ShapeAppearanceModel
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
        .toBuilder()
        .setTopLeftCorner(CornerFamily.ROUNDED, topLeftCornerRadius)
        .setTopRightCorner(CornerFamily.ROUNDED, 0)
        .setBottomLeftCorner(CornerFamily.ROUNDED, 0)
        .setBottomRightCorner(CornerFamily.ROUNDED, 0)
        .setTopEdge(new EdgeTreatment(){
            @Override public void getEdgePath(float length, float center, float interpolation, @NonNull ShapePath shapePath) {
                shapePath.quadToPoint(0, 0, length, relativeLayout.getLayoutParams().height - bottomYMargin);
            }
         })
        .build();

//create a new MaterialShapeDrawable based on above ShapeAppearanceModel and sets it color
MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this, android.R.color.holo_blue_light));

//finally use the ViewCompat static method to draw the above shapeDrawable to relativeLayout
ViewCompat.setBackground(relativeLayout, shapeDrawable);

KOTLIN:

//get the Relative Layout or any other View
val relativeLayout = findViewById<RelativeLayout>(R.id.relativeLayout)

//set the top left corner radius and bottom Y margin in pixels
val topLeftCornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20f, resources.displayMetrics).toInt()
val bottomYMargin = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 25f, resources.displayMetrics).toInt()

//create a new ShapeAppearanceModel
val shapeAppearanceModel = ShapeAppearanceModel()
        .toBuilder()
        .setTopLeftCorner(CornerFamily.ROUNDED, topLeftCornerRadius.toFloat())
        .setTopRightCorner(CornerFamily.ROUNDED, 0f)
        .setBottomLeftCorner(CornerFamily.ROUNDED, 0f)
        .setBottomRightCorner(CornerFamily.ROUNDED, 0f)
        .setTopEdge(object : EdgeTreatment() {
            override fun getEdgePath(length: Float, center: Float, interpolation: Float, shapePath: ShapePath) {
                shapePath.quadToPoint(0f, 0f, length, (relativeLayout.layoutParams.height - bottomYMargin).toFloat())
            }
        })
        .build()

//create a new MaterialShapeDrawable based on above ShapeAppearanceModel and sets it color
val shapeDrawable = MaterialShapeDrawable(shapeAppearanceModel)
shapeDrawable.fillColor = ContextCompat.getColorStateList(this, android.R.color.holo_blue_light)

//finally use the ViewCompat static method to draw the above shapeDrawable to relativeLayout
ViewCompat.setBackground(relativeLayout, shapeDrawable)

Result:

Related Topics