div+css实现图片一角凹陷效果代码

代码语言:html

所属分类:布局界面

代码描述:div+css实现图片一角凹陷效果代码

代码标签: div css 图片 一角 凹陷

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
<style>
img {
  --r: 20px; /* radius */
  --s: 40px; /* size of inner curve */
  --x: 25px; /* horizontal offset (no percentange) */
  --y: 5px;  /* vertical offset (no percentange) */
  
  width: 200px;
  border-radius: var(--r);
  
}
.top-right {
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(at calc(100% - var(--r)) var(--r),#0000 25%,#000 0);
  --_d:(var(--s) +.........完整代码请登录后点击上方下载按钮下载查看

网友评论0