# css-mask-demo

**Repository Path**: shuangfanguang/css-mask-demo

## Basic Information

- **Project Name**: css-mask-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-21
- **Last Updated**: 2025-02-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![png](./1.png)

``` html
demo-dev1
<div class="demo-dev1-container">
    <div class="demo-dev1"></div>
</div>
```

``` css
.demo-dev1 {
    --size: 40px;
    width: calc(var(--size) * 5);
    height: calc(var(--size) * 3);
    border-bottom: var(--size) solid red;
    /* padding: 40px; */
    background-color: yellowgreen;

    --t: var(--size);
    /* tooltip tail size */
    --r: var(--size);

    border-radius: var(--r)/var(--r) var(--r) calc(var(--r) + var(--t)) calc(var(--r) + var(--t));

    mask: 
        linear-gradient(#000 0 0) padding-box, 
        radial-gradient(100% 100% at 100% 100%, #0000 100%, #000 100%),
        radial-gradient(100% 100% at 0% 100%, #0000 100%, #000 100%);
    
    mask-position: 0px 0px, calc(50% + var(--size) / 2) 100%, calc(50% - var(--size) / 2) 100%;
    mask-size: 100% 100%, var(--size) var(--size), var(--size) var(--size);
    mask-repeat: no-repeat;
}
```