小编uma*_*tha的帖子

我需要在下面的图像中创建这种形状,其中包含文本.

这是我尝试的方式:

HTML

        <div class="header-bottom">

            <div class="blue-rectangle">
                <p>sadasdasdasd</p>
            </div>

            <div class="blue-rectangle">
                <p>dsasdasdasda</p>
            </div>

        </div>

CSS

.header-bottom{
position: absolute;
right:13%;
bottom:5%;
}

.blue-rectangle {
background-color: rgba(3,78,136,0.7);
padding: 10px 20px 10px 200px;
margin-bottom: 20px;
}

.blue-rectangle p{
color:white;
text-transform: uppercase;
font-size:18px;
}

我尝试添加transform:skew但是它左右偏移和文本本身.

我有一个包含大量数据的表格，因此必须水平滚动它。我设计了将每一行分开的表格作为每张单独的卡片，但我无法正确获得表格行左右部分的边界半径。如果我向右侧的末端滚动，那么我可以看到右侧的半径和左侧的相同。当你在中间时，你看不到任何边界半径。

PS：当有水平滚动时，将半径应用于第一个和最后一个 td 不起作用。:(

是否有任何技巧可以解决此问题，因此边界半径的两侧始终可见？我对桌子没有太多想法，因为它确实需要有限的属性。或者我们可能需要 javascript 来获得所需的输出？

我在下面的图片中看起来像这样，

.page-wrapper {
  background-color: #f1f2f5;
}

table {
  white-space: nowrap;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.table {
  position: relative;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.table td,
.table th,
.table tr,
.table thead,
.table tbody {
  border: none;
  position: relative;
}

.table thead th {
  border: none;
  padding-top: 0;
  padding-bottom: 0;
}

tbody {
  position: relative;
}

tbody tr {
  border-radius: 8px;
  margin-bottom: 20px;
  position: relative;
}

tbody tr::after {
  content: ''; …

我是 flutter 新手，对此一无所知，我从 rive 应用程序创建了一个简单的设计，并尝试在 flutter 应用程序上运行，但动画不运行。我从 flutter 下载的动画作品很少起作用，有些不起作用，下面链接上的一个也不起作用。它只是静态的 png 图像。我尝试将动画名称更改为idle或center，但仍然不起作用。

这是rive 下载链接。

这是我正在使用的代码，

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';
import 'package:rive/rive.dart';

class ExampleAnimation extends StatefulWidget {
  const ExampleAnimation({Key? key}) : super(key: key);

  @override
  _ExampleAnimationState createState() => _ExampleAnimationState();
}

class _ExampleAnimationState extends State<ExampleAnimation> {
  void _togglePlay() {
    if (_controller == null) {
      return;
    }
    setState(() => _controller!.isActive = !_controller!.isActive);
  }

  bool get isPlaying => _controller?.isActive ?? false;

  Artboard? _riveArtboard;
  RiveAnimationController? _controller;
  @override
  void initState() {
    super.initState();
    rootBundle.load('assets/rive/new.riv').then(
      (data) async …